reactjs - 如何在本机反应中在其他页面中显示一组图像
问题描述
我有一个页面可以处理FlatList和一个带有 id 的图像数组,当用户单击FlatList中的特定元素时,我希望在基于 id 的另一个页面上向他显示该数组上的某些元素。我有一个页面可以处理FlatList和一个带有 id 的图像数组,当用户单击FlatList中的特定元素时,我希望在基于 id 的另一个页面上向他显示该数组上的某些元素。
const List_of_Sories = ({ navigation }) => {
const imgs = [
{
img: require("../../assets/favicon.png"),
id: 1,
hhh:{
text:"hello"
}
},
{
img: require("../../assets/favicon.png"),
id: 2
},
{
img: require("../../assets/favicon.png"),
id: 3
}
]
return (
<Block center middle >
<View>
<FlatList
vertical={true}
showsVerticalScrollIndicator={false}
data={imgs}
keyExtractor={(images) => images.name}
renderItem={({ item, index }) => (
<TouchableOpacity onPress={() => navigation.navigate("allStories",{id:item.id})} >
<Image source={item.img}
key={index}
style={{
width: Dimensions.get('window').width / 2,
height: 300,
borderWidth: 5,
borderColor: "red",
margin: 4
}}
/>
</TouchableOpacity>
)}
/>
</View>
</Block >
)
}
我想在此处显示元素,如果 id 与单击的元素匹配,我想将 === 的元素显示到我想在此处显示的元素,如果 id 与单击的元素匹配,我想显示的元素是=== 到 id 如果 id 与单击的元素匹配,我想在此处显示元素我想向 id 显示 === 的元素。
export default function componentName({ route: { params } }) {
const { id } = params;
alert(id)
return (
<View >
<Text>preview post with id {id}</Text>
</View>
);
}
解决方案
推荐阅读
- android - 如何在电话呼叫或振铃时在后台运行服务?
- javascript - 如何从 React 中的状态调用动态变量?
- sql-server - SQL-SERVER - CASE 错误 - 特定源中的 CASE 不起作用
- java - 使用 Spring 在 Swagger UI 上接收 404 错误
- c# - 运行时指定实体上的动态 LINQ 联接。需要可过滤的返回对象。可能的?
- amazon-web-services - AWS - 私有 EC2(弗吉尼亚北部)和 S3(孟买) - 列表问题
- ios - UIScrollView 作为 UIControl
- android - BLE扫描不工作
- c++ - 从 C++ 文件中读取“动态”列后对它们进行排序。
- php - Laravel 5.6 aws cloudwatch 日志