在 React Native 中从 Firestore 文档中读取和显示数据

Question

背景

我正在尝试构建一个在主屏幕中显示许多商店的应用程序，它是一个功能组件（请注意这一点，因为我需要使用挂钩）我有一个滚动视图，其中显示不同的商店。

我需要什么

当用户按下其中一个商店时，它应该将其重定向到包含该特定商店信息的屏幕。我已经构建了“商店详细信息”屏幕，但使用静态信息，我想用存储在 firestore 集合中的数据替换所有这些信息。

问题

如何在 React Native 中从 Firestore 集合中检索数据，然后将每个文档中的数据分配给单独的 Touchable Opacity（我知道通过反应导航传递参数，我只是不知道要传递哪个参数使用 Firestore 时），然后在商店详细信息屏幕中显示该数据？

上下文示例代码

App.js

    <NavigationContainer> 
  <Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
    screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}> 
    <Stack.Screen name="Home"options={{headerShown: false}}> 
      {props => <HomeScreen {...props} extraData={user} />} 
    </Stack.Screen> 
    <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/> 
    <Stack.Screen name="Registration" component={RegistrationScreen}  options={{headerShown: false}}/> 
    <Stack.Screen name="storeDetail" options={{title: ''}}> 
        {props => <storeDetail {...props} extraData={} />} 
    </Stack.Screen> 
  </Stack.Navigator> 
</NavigationContainer>

在这个文件中，您会看到我已经调用了一些数据（登录和注册将 userData 传递到主屏幕），但是为了实现该方法，我依赖于我正在使用的身份验证方法的响应。我想虽然，我可能需要传递一些东西作为额外数据，我明白我应该做什么，我只是不知道如何填补空白。

提前非常感谢！

Answer 1

首先，在您的应用中安装Firebase SDK，这样您就可以对您的后端进行查询。

我不知道您的示例 App.js 是否代表您应用的当前进度状态，但我会假设：

• 您已经构建了 storeDetail 屏幕
• 在导航到屏幕（例如在主屏幕中）之前，您知道商店的 ID
• 您在导航到 storeDetail 时将 storeId 作为导航参数传递

所以在storeSetails界面，你可以在收到storeId时查询Firestore，成功后将结果保存到状态变量中：

const StoreDetailsScreen = ({ route }) => { // route is passed as a prop by React Navigation
  const { storeId } = route.params
  const [store, setStore] = useState()
  const [loading, setLoading] = useState(true) // show a loading spinner instead of store data until it's available

  useEffect(() => {

    const fetchQuery = async () => {
      const storeData = await firestore()
        .collection('stores')
        .doc(storeId)
        .get() // this queries the database

        if (storeData) {
          setStore(storeData) // save the data to store state
          setLoading(false) // set loading to false 
        } else {
          // something went wrong, show an error message or something
        }
    }

    fetchQuery()

  }, [storeId])

  if (loading) {
    return (
      <ActivityIndicator/>
    )
  }
  
  return (
    // ... store details
  )

}

然后你可以使用store中的数据在你的屏幕上渲染东西

<Text>{store.name}</Text>
<Text>{store.email}</Text>
// ...

更多关于如何在 RN 中使用 Firestore 的信息：https://rnfirebase.io/firestore/usage