React native，使用TouchableOpacity onPress

Question

我刚刚开始学习对本机的反应。我目前正在尝试在数组的图像渲染上实现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>;
}

Answer 1

好吧，在进行了一些研究之后，我找到了一种使其工作的方法。我使用了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>;
}