覚えたこと
- 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コンポーネントを利用した場合
- 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',
}
});
作成した画面イメージ