NativeBaseでsnsのフィードみたいなのを作ってみよう

参考

https://docs.nativebase.io/Components.html#Components

準備

$ create-react-native-app react-native-project

$ npm install native-base --save

$ npm install @expo/vector-icons --save

$ rnpm link

実装

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right } from 'native-base';
export default class CardShowcaseExample extends Component {
render() {
return (
<Container>
<Header />
<Content>
<Card style={{flex: 0}}>
<CardItem>
<Left>
<Thumbnail source={{uri: 'https://www.gstatic.com/webp/gallery/2.jpg'}} />
<Body>
<Text>NativeBase</Text>
<Text note>April 15, 2016</Text>
</Body>
</Left>
</CardItem>
<CardItem>
<Body>
<Image source={{uri: 'https://www.gstatic.com/webp/gallery/2.jpg'}} style={{height: 200, width: '100%', flex: 1}}/>
<Text>
Surfing is a surface water sport in which the wave rider
</Text>
</Body>
</CardItem>

<CardItem>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>12</Text>
</Button>
</Left>

<Left>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>4</Text>
</Button>
</Left>

<Right>
<Text></Text>
</Right>
</CardItem>

</Card>
</Content>
</Container>
);
}
}

実行