Передача состояния через навигацию React Native / Expo - PullRequest
Новая
       63

Передача состояния через навигацию React Native / Expo

0 голосов
/ 28 ноября 2018

В моем собственном приложении-ответе у меня есть один запрос на выборку, который получает JSON с сервера postgres.Эта выборка устанавливает состояние и передается через дочерние элементы HomeScreen для поддержания состояния через компоненты.

В моем UserScreen и OverviewScreen мне требуется доступ к тому же состоянию состояния, которое обновляется дочерним элементом HomeScreen.Как мне пропустить эту опору через навигацию, чтобы установить состояние для экрана обзора и экрана пользователя?

Навигатор настроен в своем собственном файле так же.Должен ли я настроить свой запрос на выборку через эту страницу и передать реквизиты каждой вкладке? 

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import OverviewScreen from '../screens/OverviewScreen';
import AchievementsScreen from '../screens/AchievementsScreen';
import UserScreen from '../screens/UserScreen';

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-checkbox${focused ? '' : '-outline'}`
          : 'md-checkbox'
      }
    />
  ),
};

const OverviewStack = createStackNavigator({
  Overview: OverviewScreen,
});

OverviewStack.navigationOptions = {
  tabBarLabel: 'Overview',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-trending-up' : 'md-trending-up'}
    />
  ),
};

const AchievementsStack = createStackNavigator({
  Achievements: AchievementsScreen,
});

AchievementsStack.navigationOptions = {
  tabBarLabel: 'Achievments',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-star' : 'md-star'}
    />
  ),
};

const UserStack = createStackNavigator({
  User: UserScreen,
});

UserStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-information-circle-outline' : 'md-information-circle-outline'}
    />
  ),
};

export default createBottomTabNavigator({
  HomeStack,
  OverviewStack,
  AchievementsStack,
  UserStack,
});

1 Ответ

0 голосов
/ 28 ноября 2018

При навигации вы можете передавать параметры с одного экрана на другой.Вы можете получить данные в HomeScreen и передать их.Подробнее о том, как это сделать, читайте здесь, в официальных документах

Из документов:

Здесь есть две части:

Передать параметры вмаршрут, поместив их в объект в качестве второго параметра функции navigation.navigate: this.props.navigation.navigate('RouteName', { /* params go here */ })

Считайте параметры вашего компонента экрана: this.props.navigation.getParam(paramName, defaultValue).

...