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

Question

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

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

 <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

就这样做吧：

 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>
  );
}

Answer 2

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

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

        

Answer 3

  <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>
);
}