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

Question

我想构建一个在每个屏幕中都相同的底部标签栏，但我希望底部标签的路线改变。 前任。 在底部选项卡栏中的 Screen1 中“Screen2”中的选项卡路由，当在 Screen2 中导航时，选项卡路由从 Screen2 更改为 Screen3。 但总是出现相同的底部标签栏。

一个想法是使用 Tab route {ScreenRoute} 创建底部标签栏，并在每个 Screen 更改 ScreenRoute 变量中。 前任。 在 Screen1 中 var ScreenRoute = 'Screen2'，在 Screen2 中 var ScreenRoute = 'Screen3' 等。

Answer 1

您可以使用tabPress侦听器并使用preventDefault function 来阻止默认导航事件。 此外，使用 state 指示当前路线。 使用对NavigationContainer的引用来导航到所需的屏幕。

这是一个最小的例子。

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>
  );
}

导航器和屏幕定义如下。

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>
  );
}

这里有一点点心。

选项卡上的第一次按下将导航到ScreenA2 ，第二次按下将导航到ScreenA3 ，第三次按下将再次在ScreenA上开始。