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結果
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！