时间戳

首页 > 解决方案 > React Native - 从平面列表传递数据模型

reactjs - React Native - 从平面列表传递数据模型

问题描述

我有一个平面列表：

<ScrollView nestedScrollEnabled={true}>
            <Screen style={styles.screen}>
                <TouchableOpacity onPress={() => navigation.navigate("ProfileDetailScreen")}>
                    <FlatList
                        data={users}
                        renderItem={renderItem}
                        keyExtractor={item => item.uid}
                    />
                </TouchableOpacity>
            </Screen>
        </ScrollView>

我从 firebase 获取一些数据，例如：

useEffect(() => {
        firebaseUsers
            .onSnapshot(
                querySnapshot => {
                    const newUsers = []
                    querySnapshot.forEach(doc => {
                        const user = doc.data()
                        user.id = doc.id
                        newUsers.push(user)
                    });
                    setUsers(newUsers)
                },
                error => {
                    console.log(error)
                }
            )
    }, [])

我从 firebase 获得的数据有name,image和age（以及更多字段）。

如何将单个用户的所有数据传递到ProfileDetailedScreen?

不确定实现此目的的正确方法（不确定是否需要创建数据模型等？）

标签： reactjsreact-native

解决方案

我不太了解firebase，但我有RN经验。据我了解，您将希望renderItem在您FlatList的函数中创建一个函数，该函数返回一个TouchableOpacity带有导航到ProfileDetailedScreen组件的函数，同时还传递用户对象。您将在ProfileDetailedScreen. 在导航文档中传递项目

/* 'item' is a user from the users array you passed into the data property of your FlatList above */
renderItem = ({item}) => (
   <TouchableOpacity onPress={() => navigation.navigate("ProfileDetailScreen", item)}>
      <Text> item?.name </Text> {/* show brief info about user */}
    </TouchableOpacity>
)

如果您将 Redux 用于您的应用程序状态，您也可以只导航到“ProfileDetailScreen”并调度一个设置currentUserin 状态的操作。然后，您的“ProfileDetailsS​​creen”将拉出currentUserfrom 状态。这种方式有更多的移动部件，但组件看起来像这样：

/* 'item' is a user from the users array you passed into the data property in your FlatList above */
renderItem = ({item}) => (
   <TouchableOpacity onPress={this.setUserAndNavigate.bind(this, item)}>
      <Text> item?.name </Text> {/* show brief info about user */}
    </TouchableOpacity>
)

setUserAndNavigate = (user) => {
   this.props.setUser(user);
   navigation.navigate("ProfileDetailScreen");
}

推荐阅读