如何在 React Native 中使用 Firestore 数据？

Question

我设置了 firebase，我想使用从 Firestore 检索的数据。我的 Firestore 如下所示：

我获取 Firestore 数据的函数：

export const getQuestionsAndScheduelesFromFS = async () => {
    const db = getFirestore();
    const docRefQuestions = doc(db, "questions2022", "question01");
    const docSnap = await getDoc(docRefQuestions);


    if (docSnap.exists()) {
        console.log("FS questions 2022", docSnap.data());

        return docSnap.data();
    } else {
        console.log("No such data: QUESTIONS2022!");

        return docSnap.data()
    }
}

这就是我的数据在 console.log 中的显示方式：

如何使用/解开我从 Firestore 获得的问题和替代方案？ alternatives 是一个数组，question 是一个字符串。

我想做的是在组件内部显示数据。

这是我第一次将 Firestore 与 React Native 结合使用，我确实需要帮助，谢谢 :)

Answer 1

据我了解，您只是不想显示从 firebase 获得的数据。在屏幕上显示 react-native。

下面的代码将从 firebase 中获取数据并将该数据存储在 useState 挂钩中，然后在屏幕上显示问题。请阅读 useState 和 useEffect hook 它会对你有很大帮助。


export default function App() {
   // If you ever wan't state that changes throughout the app use the useState hook
   const [data,setData] = React.useState(null); 

  // Runs once the screen loads
  React.useEffect(()=>{
     const fetch = async = ()=>{ 
        const fetchedData = await getQuestionsAndScheduelesFromFS();
        setData(fetchedData);
     }
     fetch();
  },[]) 

  // Show blank screen or whatever you want while data is waiting to be initialized from the firebase data 
  if (data===null){
     return <></>
  } 
  

  return (
    <View style={{flex:1, justifyContent: 'center', alignItems:"center",}}>
         <Text> {data.question}</Text>
   </View>
  )

}

如何在 React Native 中使用 Firestore 数据？

How can I use Firestore data in react native?

reactjs

react-native

react-redux

react-hooks

redux-firestore