1

我正在尝试设置反应导航，并且想法是具有这样的结构：

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，我的计划是从顶部开关导航器中 LoadingScreen 中的 API 获取。

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

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

4

1 回答 1

0

尝试这个：

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',
      });
    }
  }
}
于 2019-03-29T18:38:02.933 回答