原生反应，使用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(
        <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 })}}

​