javascript - 如何在两个组件之间传递数据，React Native

Question

我是 React Native 的初学者。我试图在我的应用程序中的两个组件之间传递数据。我有组件 - Home.js 和 MyModal.js。

在第一个组件 - Home.js - 我有一个包含一些数据和 FlatList 组件的数组。 Home.js 在我的应用程序中正确显示数据。此外，在 home.js 中，当用户单击 TouchableOpacity 组件中的 Card 时，我尝试显示模态:

 <TouchableOpacity onPress={() => <MyModal />}>
<Card></Card>  </TouchableOpacity>

在第二个组件 - MyModal.js - 我正在尝试显示来自 home.js 的数据/item.title/和/item.body/。

这里是所有代码:

home.js:

import React, { useState } from "react";
import {StyleSheet,View,Text,FlatList,TouchableOpacity} from "react-native";
import Card from "../components/card";
import MyModal from "../components/myModal"


function Home({ navigation }) {
  const [reviews, setReviews] = useState([
    {
      body: "lorem ipsum",
      key: " 1",
      title: "Flower",
    },
    {
      key: "2",
      title: "Two flowers",
  
      body: "lorem ipsum",
    }
  ]);

  return (
    <View style={styles.container}>
     
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => <MyModal />}>
            <Card>
              <Text>{item.title}</Text>
              <Text>{item.body}</Text>
            </Card>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

myModal.js

import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import Card from "../components/card";

export default function MyModal({ route, navigation }) {

  return (
    <View>
      <Card>
        <Text>{data.title}</Text>
        <Text>{data.body}</Text>
      </Card>
    </View>
  );
}

这是我要显示的示例:

点击前的Home.js:

点击后的屏幕(使用来自 home.js 的数据打开 MyModal.js):

这是代码框: https://codesandbox.io/s/youthful-fermat-lui4g

如有任何建议，我将不胜感激

Answer 1

Hear 是您可以按照 Way 将数据传递给其他组件的方式

首先，您定义应用程序的 NavigationContainer 根页面，如下所示

<NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
        <Stack.Screen options={{ headerShown: false }} name="Home" component= 
        {HomeScreen} />
        <Stack.Screen name="Gallery" component={GalleryScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
        <Stack.Screen name="GalleryDetails"
            component={GalleryDetailsScreen}
        />
    </Stack.Navigator>

比你使用导航我的代码库的类

const gallery = () => {
const navigation = useNavigation();

}

 navigation.navigate('GalleryDetails', { imageURI(Key): 
              item.node.image.uri(Value)}); 

听到 GalleryDetails 我 fatch 数据如下

    var imageURI = route.params.imageURI;
    console.log(imageURI);