在 React Native 中使用平面列表数据导航

Question

您好，这里我有一些 Flatlist 形式的数据，我已经提取了它，现在我想继续 我点击的屏幕示例 如果我点击屏幕 A 然后我将移动到屏幕 A， 如果我点击屏幕 B，那么我将移动到屏幕 B， 如果我点击屏幕C，那么我将移动到屏幕C， 如果我点击屏幕 D，那么我将在屏幕 D 上移动，并且 也显示他们的标题 如何根据标题和屏幕调用正确的屏幕.. 如何导航它.. Sample image here 代码在这里..

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; 

请提出任何解决方案.. 谢谢..

Answer 1

试试这个方法

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  

}