如何在反应导航TabNavigator中动态设置初始标签

Question

我正在使用，react-navigation并且嵌套TabNavigator在StackNavigator。我有三个选项卡中TabNavigator，并需要设置initialRouteName为TabNavigator动态基于某种逻辑。

我曾尝试把TabNavigator一个内部React组件具有动态选择的初始标签，并在用于StackNavigator与通过道具通过screenProps的TabNavigator。但是这样一来，我无法导航到的任何路线StackNavigator。

有什么办法可以initialRouteName动态制作。

注意：我没有为此应用程序使用redux。

Answer 1

<Tab.Navigator
 initialRouteName="YOUR_TAB_NAME"
 ... 
/>

...

参考： https: //reactnavigation.org/docs/bottom-tab-navigator/#initialroutename

完整示例：

const TabNavigator = createBottomTabNavigator();

function MyTabNavigator(props) {
  const { initialRouteName } = props;
  return (
    <TabNavigator.Navigator initialRouteName={initialRouteName}>
      <TabNavigator.Screen name="Tab1" component={Tab1} />
      <TabNavigator.Screen name="Tab2" component={Tab2} />
      <TabNavigator.Screen name="Tab3" component={Tab3} />
    </TabNavigator.Navigator>
  );
}

export default function App() {
  const initialRouteName = someCondition ? 'Tab1' : 'Tab2';
  return (
    <StackNavigator.Navigator>
      <StackNavigator.Screen
        name="TabNavigator"
        component={MyTabNavigator}
        initialParams={{ initialRouteName }}
      />
      <StackNavigator.Screen name="OtherScreen" component={OtherScreen} />
    </StackNavigator.Navigator>
  );
}

Answer 2

看来你们真的很亲近。
您可以设置导航状态的索引来指定将哪个导航状态显示为初始路线。

<SomeTabNavigator
  navigation={{
    ...this.props.navigation,
    state: {
      ...this.props.navigation.state,
      index: 1 // or whichever you want
    }
  }}
  screenProps={{
    // whatever the props you wanna pass to child screens.
  }}
/>

但你还必须通过静态路由器，否则你无法导航。（或者如果您已经有导航，请尝试navigate不使用push导航。）

class Screen extends React.Component{

  static router = SomeTabNavigator.router

...

如果情况并非如此，那么您应该检查导航器的结构，确保堆栈导航器和选项卡导航器的嵌套正确。

也许为时已晚，但我希望它能对某人有所帮助。

检查下面的链接了解更多详细信息。

https://reactnavigation.org/docs/en/custom-navigators.html