FlatListの復習

 

import { StatusBar } from 'expo-status-bar';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const DATA = [
  {id:1, title:'JavaScript'},
  {id:2, title:'Java'},
  {id:3, title:'Python'}
];

const renderItem = ({item}) => {
  return(
    <Text style={styles.itemText}>{item.title}</Text>
  )

}

export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
         data={DATA}
         renderItem={renderItem}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemText: {
    fontSize:20
  }
});

また、propsを明示すると下記のようになります。

import { StatusBar } from 'expo-status-bar';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const DATA = [
  {id:1, title:'JavaScript'},
  {id:2, title:'Java'},
  {id:3, title:'Python'}
];

const renderItem = (props) => {
  return(
    <Text style={styles.itemText}>{props.item.title}</Text>
  )

}

export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
         data={DATA}
         renderItem={renderItem}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemText: {
    fontSize:20
  }
});

 

下記のホームページも参照

【React Native】複数のデータをリストにして表示する方法【FlatList】 - Webで遊ぼ！