React-Native FlatList 项目可点击数据到另一个屏幕

Question

当您通过传递我之前从 firebase 检索到的日期点击我的平面列表中的项目时，我正在尝试访问一个屏幕，我已经尝试了几种方法但没有成功，所以我来找您。

基本上，当我单击其中一个元素时 -> 应该会出现一个包含详细信息的屏幕。

export default function Notifications() {
  const dbh = firebase.firestore();

  const [loading, setLoading] = useState(true); // Set loading to true on component mount
  const [deliveries, setDeliveries] = useState([]); // Initial empty array of users

  useEffect(() => {
    const subscriber = dbh
      .collection("deliveries")
      .onSnapshot((querySnapshot) => {
        const deliveries = [];

        querySnapshot.forEach((documentSnapshot) => {
          deliveries.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });

        setDeliveries(deliveries);
        setLoading(false);
      });

    // Unsubscribe from events when no longer in use
    return () => subscriber();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <FlatList
      style={{ flex: 1 }}
      data={deliveries}
      renderItem={({ item }) => (
        <TouchableOpacity
        onPress={() => { * HERE I NEED TO PASS DATA AND SHOW AN ANOTHER SCREEN FOR DETAILS * }}>
                        
           <View style={styles.container}>
            <Text>DATE: {item.when}</Text>
            <Text>ZIP DONATEUR: {item.zip_donator}</Text>
            <Text>ZIP BENEFICIAIRE: {item.zip_tob_deliv}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  );
}

编辑：此屏幕的小精度位于 Tab.Navigator

Answer 1

你可以在导航中传递参数，

export default function Notifications(props) {

  const { navigation } = props
  const dbh = firebase.firestore();

  const [loading, setLoading] = useState(true); // Set loading to true on component mount
  const [deliveries, setDeliveries] = useState([]); // Initial empty array of users

  useEffect(() => {
    const subscriber = dbh
      .collection("deliveries")
      .onSnapshot((querySnapshot) => {
        const deliveries = [];

        querySnapshot.forEach((documentSnapshot) => {
          deliveries.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });

        setDeliveries(deliveries);
        setLoading(false);
      });

    // Unsubscribe from events when no longer in use
    return () => subscriber();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <FlatList
      style={{ flex: 1 }}
      data={deliveries}
      renderItem={({ item }) => (
        <TouchableOpacity
        onPress={() => { 
          navigation.navigate('screenName', {
           //pass params here
          })
         }}>
                        
           <View style={styles.container}>
            <Text>DATE: {item.when}</Text>
            <Text>ZIP DONATEUR: {item.zip_donator}</Text>
            <Text>ZIP BENEFICIAIRE: {item.zip_tob_deliv}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  );
}

您可以通过 props.route.params

在导航屏幕中访问参数

React-Native FlatList 项目可点击数据到另一个屏幕

React-Native FlatList item clickable with data to another screen

react-native

react-native-flatlist