StackNavigator中的StackNavigator中的StackNavigator，TabNavigator切换到错误的选项卡

Posted 2021-04-18

我目前正面临一个问题，我嵌套在StackNavigator中的TabNavigator没有在我定义的initialRouteName中打开。

最简单的方法是看一个例子，所以我们走了：

最外面的（StackNavigator）

const RootStackNavigator = StackNavigator(
  {
    Main: {
      screen: MainTabNavigator,
    },
    Login: {
      screen: LoginScreen,
    },
    Splash: {
      screen: SplashScreen
    }
  },
  {
    initialRouteName: 'Splash',
    headerMode: 'float',
  }
);

export default class RootNavigator extends React.Component {

  componentDidMount() {
    this._notificationSubscription = this._registerForPushNotifications();
  }

  componentWillUnmount() {
    this._notificationSubscription && this._notificationSubscription.remove();
  }

  render() {
    return (
        <RootStackNavigator />
    );
  }
}

MainTabNavigator（TabNavigator）：

const HomeStackNavigator = StackNavigator(
  {
    //Lots of screens.
  },
  {
    initialRouteName: 'HomeScreen',
    headerMode: 'none',
  }
);

const BStackNavigator = StackNavigator(
  {
    //Lots of screens.
  },
  {
    initialRouteName: 'BScreen',
    headerMode: 'none',
  }
);

const CNavigator = StackNavigator(
  {
    //Lots of screens
  },
  {
    initialRouteName: 'CScreen',
    headerMode: 'none',
  }
);

const DStackNavigator = StackNavigator(
  {
    //Lots of screens.
  },
  {
    initialRouteName: 'DScreen',
    headerMode: 'none',
  }
);

const EStackNavigator = StackNavigator(
  {
    //Lots of screens
  },
  {
    initialRouteName: 'EScreen',
    headerMode: 'none',
  }
);

export default TabNavigator(
  //Adds elements to the navigator at the bottom.
  {
    Home: {
      screen: HomeStackNavigator
    },
    B: {
      screen: BStackNavigator,
    },
    C: {
      screen: CStackNavigator,
    },
    D: {
      screen: DStackNavigator,
    },
    E: {
      screen: EStackNavigator,
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch (routeName) {
          //define icons.
        }
        return (
            <Ionicons
              name={iconName}
              size={24}
              style={{ marginBottom: -3 }}
              color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
            />
        );
      },
    }),
    tabBarOptions: {
      inactiveBackgroundColor: '#4d5a8b',
      activeBackgroundColor: '#4d5a8b',
      showLabel: false,
      initialRouteName: 'Home'
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

我期待的是应用程序最初进入启动画面。检查用户是否已登录，是的，然后转到MainTabNavigator的initialRouteName，但实际发生的是它最初是在Home选项卡中加载的，然后在大约2-3秒之后它会轻弹到D选项卡。

注意：我注意到的一件事是我在选项卡的StackNavigators中有一些屏幕，例如你可以从BStackNavigator和CStackNavigator导航到ScreenX。

有没有人以前经历过这种情况并有办法绕过它？

我真的很感激任何帮助。

谢谢！

答案

我认为这是因为initialRouteName参数位于错误的位置。

例：

export default TabNavigator(
  //Adds elements to the navigator at the bottom.
  {
    Home: {
      screen: HomeStackNavigator
    },
    B: {
      screen: BStackNavigator,
    },
    C: {
      screen: CStackNavigator,
    },
    D: {
      screen: DStackNavigator,
    },
    E: {
      screen: EStackNavigator,
    }
  },
  {
    initialRouteName: 'Home', // SHOULD BE HERE
    navigationOptions: ({ navigation }) => ({
     ...
    }),
    tabBarOptions: {
      inactiveBackgroundColor: '#4d5a8b',
      activeBackgroundColor: '#4d5a8b',
      showLabel: false,
      //initialRouteName: 'Home', SHOULD NOT BE HERE
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

文档：

• TabNavigator API