如何根据 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)

我将用于构建抽屉导航器配置的不同类别将来自 API，我的计划是从顶部开关导航器中的 LoadScreen 中的 API 获取。

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

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

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