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> ); } }
実行
$ npm start
結果