react-native - React Native でのフラットリスト データを使用したナビゲーション

Question

こんにちは、Flatlist の形式のデータがあり、それを抽出しました。次に、画面 A をクリックした場合にクリックした画面に移動します。画面をクリックすると、画面 A に移動します。 B では画面 B に移動し、画面 C をクリックすると画面 C に移動し、画面 D をクリックすると画面 D に移動し、ヘッダーも表示します。ヘッダーと画面.. 操作方法.. サンプル画像はこちら コードはこちら..

import React, {useState} from 'react';
import {
    FlatList,
    Image,
    View,
    Text,
    SafeAreaView,
    StyleSheet,
    TouchableOpacity
} from 'react-native';
import App1 from './App1';

const dummyArray = [
  {id: '1', value: 'A',exdate: '2020', City: 'Delhi'},
  {id: '2', value: 'A',exdate: '2019',City: 'Mumbai'},
  {id: '3', value: 'C',exdate: '2015 ',City: 'Indore'},
  {id: '4', value: 'D',exdate: '2016',City: 'Patna'},
  {id: '5', value: 'E',exdate: '2000',City: 'Raipur'},
];

const Home = ({ navigation }) => {
  const [listItems, setListItems] = useState(dummyArray);  
  function  handlePick(item){    
 }
 
  const ItemView = ({item}) => {     //flatlist data view
    return (
      // FlatList Item
      <View style={styles.itemView}>
        <TouchableOpacity style={styles.button} activeOpacity={.5}
        onPress={()=>handlePick(item)}>
        <View style={styles.stateView}>
        <Text style={styles.textItem} onPress={() => getItem(item)}>
          {item.value}
        </Text>
        <Image source={require('./right.jpg')} style={{marginLeft: 70, marginTop: 5,width: 30, height: 30}} />
        </View>
        <View
          style={{
              marginTop: 3,
              height: 1,
              width: '100%',
              backgroundColor: '#C8C8C8'
          }}
      />
      <Text style={styles.text}>Date{"\t\t\t\t"}{item.exdate}</Text>   //flatlist Data
      <Text style={styles.capitalText}>Capital City{"\t\t\t\t\t\t"}{item.City}</Text> //flatlistCity
      </TouchableOpacity>
      </View>
    );
  };

  
  const ItemSeparatorView = () => {
    return (
      // FlatList Item Separator
      <View
          style={{
              backgroundColor: '#C8C8C8'
          }}
      />
    );
  };
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <FlatList
          data={listItems}
          ItemSeparatorComponent={ItemSeparatorView}
          renderItem={ItemView}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
  },
  textItem: {
    marginTop: 5,
    fontSize: 18,
    flexDirection: 'row',
    fontWeight: 'bold',
    height: 20,
    width: 250,
  },
  itemView: {
    height: 150,
    padding: 10,
    margin: 8,
    backgroundColor: '#fff'
  },
  stateView:{
    height: 40,
    flexDirection: 'row',
  },
  text:{
    marginTop: 5,
    width: 300,
    height: 28
  },
});

export default Home; 

解決策を提案してください..ありがとう..