UI Kitten底部标签栏如何设置initialRouteName指定默认启动标签

解决方案 #

方法1：配置底部标签导航初始路由（推荐） #

直接在createBottomTabNavigator返回的Navigator组件上添加initialRouteName属性，指定为第二个标签的路由名即可，修改你的BottomTabsNavigator代码如下：

export const BottomTabsNavigator = () => (
  <Navigator 
    tabBar={(props) => <BottomTabBar {...props} />}
    // 新增这行配置，指定初始路由为第二位的screen2
    initialRouteName="screen2"
  >
    <Screen name="screen1" component={Screen1}/>
    <Screen name="screen2" component={Screen2}/>
    <Screen name="screen3" component={Screen3} />
  </Navigator>
);

该属性是React Navigation的标准配置，UI Kitten的BottomNavigation组件本身通过导航状态的state.index控制选中态，设置初始路由为screen2后，导航状态初始index会自动变为1，和第二个标签的位置完全对应，不需要额外修改底部导航栏的逻辑。

方法2：手动指定导航初始状态 #

如果你的项目存在嵌套导航缓存逻辑，方法1不生效时，可以在NavigationContainer上通过initialState强制指定初始导航状态，修改AppNavigator代码如下：

export const AppNavigator = () => {
  // 手动定义初始导航状态，索引从0开始计数，1对应第二个标签
  const initialState = {
    routes: [
      {
        name: 'BottomTabs',
        state: {
          index: 1,
          routes: [
            { name: 'screen1' },
            { name: 'screen2' },
            { name: 'screen3' }
          ]
        }
      }
    ]
  };

  return (
  <SafeAreaView>
  <NavigationContainer initialState={initialState}>
    <Navigator headerMode='none' >
      <Screen name={'BottomTabs'} component={BottomTabsNavigator} />
    </Navigator>
  </NavigationContainer>
  </SafeAreaView>
)
};

内容的提问来源于stack exchange，提问作者Rocio