Блог

Справочная информация

Я пытаюсь создать приложение, которое показывает несколько хранилищ на главном экране, которое является функциональным компонентом (имейте в виду, что мне нужно использовать хуки)У меня есть вид прокрутки, в котором отображаются разные хранилища.

Что мне нужно

Когда пользователь нажимает на одно из хранилищ, оно должно перенаправить его на экран, содержащий информацию об этом конкретном хранилище. Я создал экран «сведения о хранилище», но со статической информацией я хочу заменить всю эту информацию данными, хранящимися в коллекции firestore.

Вопрос

Как можно получить данные из коллекции Firestore в react native, затем присвоить данным из каждого документа отдельную осязаемую непрозрачность (я знаю о передаче параметров с помощью react navigation, я просто не знаю, какой параметр передавать при работе с 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>
  

В этом файле вы увидите, что я уже вызвал некоторые данные (Login и Register передают userData на главный экран), однако для реализации этого метода я зависел от ответа от метода аутентификации, который я использовал. Я полагаю, хотя мне, вероятно, нужно будет передать что-то в качестве дополнительных данных, я понимаю, что мне следует делать, я просто не знаю, как заполнить пробелы.

Заранее большое спасибо!

Во-первых, установите Firebase SDK в свое приложение, чтобы вы могли делать запросы к своей серверной части.

Я не знаю, соответствует ли ваш образец App.js представляет текущее состояние прогресса в вашем приложении, но я собираюсь предположить, что:

• у вас уже есть созданный экран storeDetail
• идентификатор хранилища известен до перехода к экрану (например, на главном экране)
• вы передаете StoreID в качестве параметра навигации при переходе к storeDetail

Таким образом, на экране storeSetails вы можете запрашивать Firestore при получении storeId и сохранять результат в переменной состояния при успешном выполнении:

 
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>
// ...
  

Дополнительная информация о том, как использовать Firestore в RN: https://rnfirebase.io/firestore/usage