フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

ReactNativeでデータ一覧画面を作成する

覚えたこと

  • React Nativeは画面スクロールするには、scrollviewまたはflatlistを使う
  • flatlistの方が処理は早い。

reactnative.dev

ダメなコード

  • 下記のコードで記述すると、リストしたデータが画面スクロールするほど多い場合、端末上でスクロールしない。
  const items = articles.map( (article, index) => {
    return (
        <ListItem
            imageUrl={article.urlToImage}
            title={article.title}
            author={article.author}
            key={index} 
        />
    )
  })

    <View style={styles.container}>
       {items}
    </View>

FlatListコンポーネントを利用した場合

import React from 'react';
import ListItem from './components/ListItem';
import articles from './dummies/articles'
import { StyleSheet, View, FlatList,SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={articles}
        renderItem={({ item }) => (
          <ListItem 
            imageUrl={item.urlToImage}
            title={item.title}
            author={item.author}
          />
        )}
        keyExtractor={(item,index) => index.toString()}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  }
});

作成した画面イメージ

f:id:PX-WING:20200617010939p:plain