我是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数据的MyModal.js):
这是codesandbox链接: https://codesandbox.io/s/youthful-fermat-lui4g
如有建议,将不胜感激。