React Native - 将导航传递给子组件答案

【问题标题】：React Native - Passing navigation into a child componentReact Native - 将导航传递给子组件
【发布时间】：2022-11-10 18:22:51
【问题描述】：

我有一个带有以下内容的屏幕：

function Intereset ({ navigation }) {
    function ReturnMyFunction () {
    if (!var.length) {
        return ( <NoILikes /> )
    } else {
        return (
            <FlatList
                data={Ilike}
                keyExtractor={item => item._id}
                ItemSeparatorComponent={() => <Divider />}
                renderItem={UserRow}
            /> 
        )
    }
}

return ( <ReturnILikeOrNoILike /> )
}
export default Interest

下面是我的UserRow 组件：

const UserRow = ({ item, navigation }) => (
  <TouchableOpacity onPress={() => navigation.navigate("ProfileDetailScreenSingle", { userID: item.likeTo })}>
    <View style={styles.row}>
        <Image style={styles.avatar}
            resizeMode={"cover"}
            source={{ uri: item.likeToProfileImage }}
        />
        <View style={styles.textContainer}>
            <Text style={styles.name}>{item.likeToName}, <Text>{item.likeToAge}</Text></Text>
        </View>
        <Text style={styles.viewProfileText}>View Profile</Text>
        <AntDesign name="right" size={14} color="black" />
    </View>
</TouchableOpacity>

)

当我单击UserRow 进行导航时，出现以下问题。

【问题讨论】：

标签： reactjs react-native react-navigation react-native-flatlist react-native-navigation

【解决方案1】：

FlatList 本身不会将属性传递给渲染项，您需要手动执行此操作：

const renderUserRow = ({item}) => <UserRow navigation={navigation} item={item}/>
...
 <FlatList
    data={Ilike}
    keyExtractor={item => item._id}
    ItemSeparatorComponent={() => <Divider />}
    renderItem={renderUserRow}
 />

【讨论】：