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

Question

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

在第一个组件-Home.js中，我有带有一些数据的数组和FlatList组件。 Home.js正确显示我的应用程序中的数据。此外，在home.js中，我正在尝试在用户单击TouchableOpacity组件中的卡片时显示Modal：

 <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）：

这是codesandbox链接: https://codesandbox.io/s/youthful-fermat-lui4g

如有建议，将不胜感激。

- MartynBrzoz

Answer 1

这里是一种可以通过以下方式传递数据到其他组件的方法。

首先，您需要像下面这样定义应用程序的 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，我获取以下数据

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

        

- mehul chauhan

---

谢谢您的回答。在我的情况下，我该如何在<MyModal>组件中使用它？我想要通过onPress显示模态框，就像我的代码中所示： <TouchableOpacity onPress={() => <MyModal />} > - MartynBrzoz

Answer 2

  <View style={styles.container}>
   
    <FlatList
      data={reviews}
      renderItem={({ item }) => (
        <TouchableOpacity onPress=props.navigation.push('nameOfRouteModal', 
          itemToPast)>
          <Card>
            <Text>{item.title}</Text>
            <Text>{item.body}</Text>
          </Card>
        </TouchableOpacity>
      )}
    />
  </View>
);
}

export default function MyModal({ route, navigation }) {
const routeParams = route.params;
return (
  <View>
    <Card>
      <Text>{routeParams.title}</Text>
      <Text>{routeParams.body}</Text>
    </Card>
  </View>
);
}

- Dedi

---

嗨@Dedi，我正在尝试实现这个解决方案，但不幸的是我遇到了一个错误“props未定义”。这段代码完整吗？ - MartynBrzoz

Answer 3

就像这样做：

 function Home({ navigation }) {
// take a state by default null when a record is clicked it will be updated. and //pass it to the Modal like below 
const [currentReview , setCurrentView] = useState(null)
  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={() => {setCuurentReview(item); <MyModal 
          currentReview={currenReview} />}>
            <Card>
              <Text>{item.title}</Text>
              <Text>{item.body}</Text>
            </Card>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

然后像这样捕获它：

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

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

- Dawood Ahmad

---

嗨，@Dawood Ahmad，我正在尝试实现这个解决方案，但不幸的是按下时什么也没发生 - 我的模态框没有打开。这段代码完整吗？ - MartynBrzoz