首页 > 解决方案 > 如何在本机反应中在其他页面中显示一组图像

问题描述

我有一个页面可以处理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>
    );
}

标签: reactjsreact-nativereact-navigation

解决方案


推荐阅读