Как отобразить конфигурацию реагирующего ящика навигации на основе вызова API

Question

Я пытаюсь настроить реакцию навигации, и идея состоит в том, чтобы иметь такую ​​структуру:

LoadingStack (Switch Navigator)  
    Loading: LoadingScreen (Screen)  
    Main: BottomTabBar (Bottom Tab Navigator)  
             Home: DrawerNav (Drawer Navigator  
                     [Multiple categories within drawer all with the same screen] 
             Settings: SettingScreen (Screen)
             More: MoreScreen (Screen)

Различные категории, которые я буду использовать для создания конфигурациистройка BoxNavigator, будут исходить из API, и я планирую извлечь их из API на экране загрузки в навигаторе верхнего переключателя.

Я изо всех сил пытаюсь выяснить, как получить эти данные в правильном месте, чтобы построить навигатор ящика. Сначала я попытался сделать маршрут «Home» внутри BottomTabBar компонентом экрана, а затем я мог передать результаты API в этот экран, построить конфигурацию ящика и затем вручную вернуть в поле bottomNavigator, что и относится к этому ответу о переполнении стека. я думаю: ответ переполнения стека однако я получаю неизменную ошибку, что нет доступной поддержки навигации.

Итак, я предполагаю, что мой вопрос заключается в том, как мне построить навигатор с выдвижными ящиками на основе данных, которые я получу на экране загрузки навигаторов-переключателей?

Answer 1

Попробуйте это:

const YourDrawer = ({ field1, field2 }) => {
  const RouteConfigs = {
    // ...
  };

  const DrawerNavigatorConfig = {
    // ...
  };
  const Drawer = createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

  return <YourDrawer />;
};

const YourTabNavigator = ({ navigation }) => {
  const field1Value = navigation.getParam('field1');
  const field2Value = navigation.getParam('field1');

  const RouteConfigs = {
    Home: (props) => <YourDrawer { ...props } field1={field1Value} field2={field2Value} />,
    // Rest of routes...
  };
  const YouTab = createTabNavigator(RouteConfigs);

  return <YourTab />;
};

export default createAppContainer(YourTabNavigator);

class Loading extends React.Component {
  componentWillReceiveProps() {
    if (dataFetched) {
      this.props.navigationnavigate('Main', {
        field1: 'someVal',
        field2: 'someVal',
      });
    }
  }
}