reactjs - 如何动态设置 react 导航 TabNavigator 中的初始选项卡

Question

我正在使用react-navigation，并且在StackNavigator内有一个嵌套的TabNavigator。我在 TabNavigator 中有三个选项卡，需要根据某些逻辑动态为 TabNavigator 设置 initialRouteName。

我尝试将 TabNavigator 放入具有动态选择初始选项卡的 React 组件中，并在 StackNavigator 中使用，并通过 传递 Prop TabNavigator 的 screenProps。但这样我就无法导航到 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>
  );
}