React Native②　リスト表示を行い、さらには、タップできるようにする

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

const DATA = [
  {id:'1', title:'テキスト１'},
  {id:'2', title:'テキスト２'},
  {id:'3', title:'テキスト３'}
];



export default function App() {
  const [itemName, setItemName] = useState("");
  const renderItem = ({item}) => {
    return(
     <TouchableOpacity
       onPress = {() => setItemName(item.title)}>
      <Text style={styles.item}>
        {item.title}
      </Text>
     </TouchableOpacity>
    )
  }
  return (
   <View style={styles.container}>
    <FlatList
       data = {DATA}
       renderItem = {renderItem}/>
    <Text>{itemName}</Text>
   </View>
  );
}

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

次にタップしたら、アラートがでてくるようにする

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

const DATA = [
  {id:'1', title:'テキスト１'},
  {id:'2', title:'テキスト２'},
  {id:'3', title:'テキスト３'}
];



export default function App() {
  const [itemName, setItemName] = useState("");
  const renderItem = ({item}) => {
    return(
     <TouchableOpacity
       onPress = {() =>{Alert.alert(item.title,'タップされました。')}}>
      <Text style={styles.item}>
        {item.title}
      </Text>
     </TouchableOpacity>
    )
  }
  return (
   <View style={styles.container}>
    <FlatList
       data = {DATA}
       renderItem = {renderItem}/>
    <Text>{itemName}</Text>
   </View>
  );
}

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