如何基于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)

我将用于构建drawerNavigator配置的不同类别将来自API，我的计划是从顶部切换导航器中的LoadingScreen中的API获取。

我正在努力弄清楚如何将这些数据放到正确的位置来构建抽屉导航器。我最初尝试将BottomTabBar中的'Home'路由作为一个屏幕组件，然后我可以将API结果传递到该屏幕，构建抽屉配置然后手动返回drawerNavigator，这就是堆栈溢出的答案所指的我认为：stack overflow answer然而我得到一个不变的错误，没有导航道具可用。

所以我想我的问题是我如何基于我将在交换机导航器加载屏幕中获取的数据来构建抽屉导航器？

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',
      });
    }
  }
}