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

Posted 2023-02-16

【中文标题】在 React Native 中使用平面列表数据导航

【英文标题】：Navigation With Flatlist Data in React Native

【发布时间】：2021-02-17 00:42:19

【问题描述】：

您好，这里我有一些 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; 

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

【参考方案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  

【讨论】：

这里所有的屏幕在 Flatlist 中都有更多的一些项目，但它不适用..

抱歉没听明白请详细说明

据我了解，您必须通过检查条件来检查要导航的屏幕

我知道但是我如何检查这些条件我不明白这件事..

您应该通过检查 if(item.value === "A") 等项目上的 handlePick 函数上的条件，然后像这样导航到屏幕 A 等等来了解哪个项目已单击...