React native，使用 TouchableOpacity onPress

Question

我刚开始学习 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>;
}

Answer 1

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

这是我在 UserInfo.js 中的 return 代码：

    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>;
}

Answer 2

我想知道添加括号和箭头是否解决了问题。

您来自：

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

为此：

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

React native，使用 TouchableOpacity onPress

React native, using TouchableOpacity onPress

view

react-native

touchableopacity

onpress