0

我刚开始学习 React Native。我目前正在尝试在从数组渲染图像时实现 TouchableOpacity，并使用数组中该元素的信息来创建新页面。代码的目标是拥有一个列出所有图像的 userInfo 页面，一旦您点击图像，它将使用 userDetails 显示该用户的详细信息（您将只看到该用户而看不到其他用户）。我知道我的 TouchableOpacity 部分不起作用，但我不知道如何使它起作用。

这是来自我的 userInfo.js：

const UserInfo =() => {
    const users = [
        {userName: "A",
         imageSource: require("../../assets/users/A.jpg"),
         bio: "this is A"
        },
        {userName: "B",
        imageSource: require("../../assets/users/B.jpg"),
        bio: "this is B"
        },
        {userName: "C",
        imageSource: require("../../assets/users/C.jpg"),
        bio: "this is C"
        }
    ]

    return(
        <FlatList 
        showsVerticalScrollIndicator={false}
        keyExtractor={(users)=> users.userName}
        data={users}
        renderItem = {({item})=>{
            return <View>
                <TouchableOpacity onPress={userInfoLink(users.userName, users.imageSource, users.bio)}>
                    <View style={styles.viewBox}><Image style={styles.image} source={item.imageSource}/></View>
                </TouchableOpacity>
                <Text style={styles.text}>{item.userName}</Text>
            </View>;
        }}
        />
    )
};

这是来自我的 userDetails.js：

const UserDetail=({imageSource, userName, bio}) => {
    return <View>
        <View style={styles.viewBox}><Image style={styles.image} source={imageSource}/></View>
        <Text style={styles.text}>User name: {userName}</Text>
        <Text style={styles.text}>Bio: {bio}</Text>
    </View>;
}
4

2 回答 2

0

好的，在做了一些研究之后，我找到了一种使它起作用的方法。我使用了 navigation.navigate 并将参数传递到页面中。

这是我在 UserInfo.js 中的返回码：

    return(
        <FlatList 
        showsVerticalScrollIndicator={false}
        keyExtractor={(users)=> users.userName}
        data={users}
        renderItem = {({item})=>{
            return <View>
                <TouchableOpacity onPress={()=>{navigation.navigate('UserDetails', {imageSource: item.imageSource, userName: item.userName, bio:item.bio })}}>
                    <View style={styles.viewBox}><Image style={styles.image} source={item.imageSource}/></View>
                </TouchableOpacity>
                <Text style={styles.text}>{item.userName}</Text>
            </View>;
        }}
        />
    )

这是 UserDetails.js 中的代码：

const UserDetail=({navigation}) => {
    const imageSource = navigation.getParam('imageSource', 'a no image image');  
    const userName = navigation.getParam('userName', 'username error');  
    const bio = navigation.getParam('bio', 'bio error');  

    return <View>
        <Text style={styles.title}>User Detail</Text>
        <View style={styles.viewBox}><Image style={styles.image} source={imageSource}/></View>
        <Text style={styles.text}>User name: {userName}</Text>
        <Text style={styles.text}>Bio: {bio}</Text>
        <Button title="User Info" onPress={()=>{navigation.navigate('UserInfo')}}/>
    </View>;
}
于 2020-06-14T03:42:32.263 回答
0

我想知道添加括号和箭头是否是修复它的原因。

你来自：

onPress={userInfoLink(users.userName, users.imageSource, users.bio)}

对此：

onPress={()=>{navigation.navigate('UserDetails', {imageSource: item.imageSource, userName: item.userName, bio:item.bio })}}

于 2021-10-12T14:23:14.413 回答