React Native基礎⑤～FlatListのアイテムをタッチするとアラートが出てくるようにする

import { StatusBar } from 'expo-status-bar';

import { FlatList, StyleSheet, Text, TouchableOpacity, View, Alert} from 'react-native';

const DATA = [

  {id:1, title:'JavaScript'},

  {id:2, title:'Java'},

  {id:3, title:'Python'}

];

const renderItem = ({item}) => {

  return(

    <TouchableOpacity

        onPress={() => {

          Alert.alert('タイトル','タップされました');

        }}>

       <Text style={styles.itemText}>{item.title}</Text>

    </TouchableOpacity>

   

  )

}

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

  }

});

Touchable系コンポーネントを利用すればよい。

ここで、itemってどこからでてきたの？という質問が出てくる。

これは、FlatListのプロパティでrenderItemを使用した際、FlatListのあるコンポーネントからrenderItemコンポーネントへ、propsの一つとしてitemを渡している。