React Native 底栏选项卡更改路由变量

Question

I want to build a bottom tab bar that is same in every screen but I want bottom Tabs' route change. ex. In Screen1 in bottom tab bar Tab route in 'Screen2' and when navigate in Screen2 then tab route change from Screen2 to Screen3. But always appear the same bottom tab bar.

One idea is to create bottom tab bar with Tab route {ScreenRoute} and in every Screen change ScreenRoute variable. ex. In Screen1 var ScreenRoute = 'Screen2', In Screen2 var ScreenRoute = 'Screen3' etc.

Answer 1

You could use a tabPress listener and prevent the default navigation event using the preventDefault function. Furthermore, use a state to indicate the current route. Use a reference to the NavigationContainer in order to navigate to a desired screen.

Here is a minimal example.

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

export default function App() {
  const navigationRef = React.useRef();
  const [routeName, setRouteName] = React.useState('');
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        const currentRoute = navigationRef.current.getCurrentRoute();
        setRouteName(currentRoute.name);
      }}>
      <Tab.Navigator>
        <Tab.Screen
          name="A"
          component={StackA}
          listeners={{
            tabPress: (e) => {             
              e.preventDefault()
              if (routeName === "ScreenA") {
                setRouteName("ScreenA2");
                navigationRef.current.navigate("ScreenA2")
              } else if (routeName === "ScreenA2") {
                setRouteName("ScreenA3");
                navigationRef.current.navigate("ScreenA3")
              } else {
                setRouteName("ScreenA")
                navigationRef.current.navigate("ScreenA")
              }
            },
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

The navigators and screens are defined as follows.

function ScreenA() {
  return (
    <View>
      <Text>ScreenA</Text>
    </View>
  );
}

function ScreenA2() {
  return (
    <View>
      <Text>ScreenA2</Text>
    </View>
  );
}

function ScreenA3() {
  return (
    <View>
      <Text>ScreenA3</Text>
    </View>
  );
}

function StackA() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={ScreenA} />
      <Stack.Screen name="ScreenA2" component={ScreenA2} />
      <Stack.Screen name="ScreenA3" component={ScreenA3} />
    </Stack.Navigator>
  );
}

Here is a little snack .

The first press on the tab will navigate to ScreenA2 , the second press will navigate to ScreenA3 , the third press will start on ScreenA again.