React native 使用React Native中的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; 

import React，{useState}来自“React”；
进口{
平面列表，
形象,，
看法
文本，
安全区域视图，
样式表，
可触摸不透明度
}从“反应本机”；
从“/App1”导入App1；
常量dummyArray=[
{id:'1'，value:'A'，exdate:'2020'，City:'drish'}，
{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'}，
];
常量Home=（{navigation}）=>{
const[listItems，setListItems]=useState（dummyArray）；
功能手柄（项目）{
}
const ItemView=（{item}）=>{//flatlist数据视图
返回(
//平面列表项
手杖（项目）}>
getItem（项目）}>
{item.value}
日期{“\t\t\t\t”}{item.exdate}//flatlist数据
首都{“\t\t\t\t\t\t”}{item.City}//flatlistCity
);
};
常量ItemSeparatorView=（）=>{
返回(
//平面列表项分隔符
);
};
};
返回(
index.toString（）}
/>
);
};
const styles=StyleSheet.create({
容器：{
为内容辩护：“中心”，
弹性：1，
边缘左：10，
marginRight:10，
marginBottom:10，
},
text项目：{
玛金托普：5，
尺码：18，
flexDirection:'行'，
fontWeight:'粗体'，
身高：20，
宽度：250，
},
项目视图：{
身高：150，
填充：10，
差额：8，
背景颜色：“#fff”
},
州视图：{
身高：40，
flexDirection:'行'，
},
正文：{
玛金托普：5，
宽度：300，
身高：28
},
});
导出默认主页；

请提出解决办法。。 谢谢。

试试这个方法

function  handlePick(item){   

  const route = `Screen${item.value}`; // dynamic screen like 'ScreenA' or 'ScreenB' etc...
  navigation.navigate(route, {data: item} ); This way will navigate to route with data object of item  

}

---

这里所有的屏幕都有更多的Flatlist中的一些项目，它不适用于此..很抱歉没有让您了解，请详细解释，据我所知，您必须通过检查条件来检查要导航的屏幕我知道，但我如何检查这些条件我不了解这件事..您应该通过检查项目上的handlePick函数上的条件if（item.value==“A”）来知道哪个项目已单击，然后导航到类似的屏幕A，依此类推。。。