React Native底部标签导航点击中间按钮无法跳转至指定FormScreen

问题原因 #

你当前的实现存在两个核心错误：

1. 中间底部标签的Screen绑定了component={ProfileNavigator}，该标签对应的导航上下文默认是ProfileNavigator的栈，调用navigate("FormScreen")时会优先在这个栈内查找路由，找不到就会跳转到ProfileNavigator的默认首页。
2. FormScreen没有注册到可全局访问的CoreStack导航中，无法跨栈直接跳转。

修复步骤 #

第一步：将FormScreen注册到核心导航栈

修改CoreNavigator代码，添加FormScreen的路由配置：

function CoreNavigator() {
  return (
    <CoreStack.Navigator>
      <CoreStack.Screen
        name="BottomTabNavigator"
        component={BottomTabNavigator}
        options={{
          headerShown: false,
        }}
      />
      <CoreStack.Screen name="AboutScreen" component={AboutScreen} />
      <CoreStack.Screen name="WebScreen" component={WebScreen} />
      {/* 新增FormScreen到核心栈 */}
      <CoreStack.Screen name="FormScreen" component={FormScreen} />
    </CoreStack.Navigator>
  );
}

第二步：修改底部标签中间按钮的配置

先定义一个空组件作为中间标签的占位组件，修改跳转逻辑直接调用父级核心导航栈的跳转方法：

// 顶部定义空占位组件，不需要渲染任何内容
const Placeholder = () => null;

const BottomTabs = createBottomTabNavigator();
function BottomTabNavigator({ navigation, route }) {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen
        name="ExploreTab"
        component={ExploreNavigator}
      />

      <BottomTabs.Screen
        name="FormTabPlaceholder" // 修改名称避免和目标路由冲突
        component={Placeholder} // 替换空组件占位，不再绑定ProfileNavigator
        options={({ navigation }) => ({
          tabBarLabel: "",
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                // 获取父级CoreStack导航实例，直接跳转到全局的FormScreen
                navigation.getParent().navigate("FormScreen");
              }}
            >
              <View>
                <Icon
                  type="font-awesome-5"
                  name="plus"
                  size={moderateScale(25)}
                  color={Colors.white}
                />
              </View>
            </TouchableOpacity>
          ),
        })}
      />
      <BottomTabs.Screen
        name="ProfileTab"
        component={ProfileNavigator}
      />
    </BottomTabs.Navigator>
  );
}
export default BottomTabNavigator;

补充说明 #

如果你的FormScreen本身是ProfileNavigator栈内的子路由，也可以直接指定跳转的栈和子路由，写法如下：

navigation.navigate("ProfileTab", { screen: "FormScreen" })

这种情况不需要把FormScreen加到CoreStack里，适合FormScreen属于个人中心模块的业务场景。

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