React-NativeでNews一覧（レイアウト編） #React

前回書いたReact-NativeでNews一覧ページを作るのレイアウトのバリエーション。
※expo 31.0.2利用

完成イメージ

Native Baseをインポート

今回はNative Baseを使ってレイアウトしていきます。

terminal

npm install --save native-base
npm install

Aritcle.js

Article.js

import React from 'react';
import { View, Linking, TouchableHighlight } from 'react-native';
+import { Text, Button, Divider } from 'react-native-elements';
+import { Container, Header, Content, Spinner, Thumbnail, Left, Body, Card, CardItem } from 'native-base';

import moment from 'moment';

export default class Article extends React.Component {
  render() {
    const {
      description,
      publishedAt,
      source,
      urlToImage,
      url
    } = this.props.article;
    const { noteStyle } = styles;
    const time = moment(publishedAt || moment.now()).fromNow();
    const defaultImg =
      'https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Images-HD-Diamond-Pattern-PIC-WPB009691.jpg';

    return (
            <TouchableHighlight
                useForeground
                onPress={() => Linking.openURL(url)}
            >

+                <Card style={{flex: 0}}>
+                    <CardItem>
+                        <Left>
+                        <Thumbnail square large source={{uri: urlToImage || defaultImg}} />
+                        <Body>
+                            <Text style={{ marginBottom: 10 }}>
+                                {description || 'Read More..'}
+                            </Text>
+                            <View
+                                style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+                            >
+                            <Text style={noteStyle}>{source.name.toUpperCase()}</Text>
+                            <Text style={noteStyle}>{time}</Text>
+                        </View>
+                        </Body>
+                        </Left>
+                    </CardItem>
+                </Card>
+            </TouchableHighlight>
    );
  }
}

const styles = {
  noteStyle: {
    margin: 5,
    fontStyle: 'italic',
    color: '#b2bec3',
    fontSize: 10
  },
};

動作確認

terminal

expo start

イメージ画像のようになっていれば成功です。