React Native：BottomTabNavigator内页面跳转至独立页面的疑问

报错原因 #

当前你仅在createBottomTabNavigator中注册了Discover和Chats两个页面，Play页面未在导航容器中完成注册，导致导航无法识别navigate('Play')的指令，从而抛出报错。

解决方案 #

将底部Tab导航嵌套在Stack导航中，把Play页面注册到外层Stack导航里，即可实现从Tab页跳转到独立的Play页面（跳转后底部Tab会自动隐藏）。

1. 修改MainComponent.js代码

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
import PlayScreen from './PlayScreen'; // 导入Play页面组件

// 定义屏幕名称常量
const homeName = 'Discover';
const detailsName = 'Chats';
const mainTabsName = 'MainTabs';
const playName = 'Play';

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

// 封装底部Tab导航为独立组件
function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name={homeName} component={HomeScreen} />
      <Tab.Screen name={detailsName} component={DetailsScreen} />
    </Tab.Navigator>
  );
}

export default function MainComponent() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={mainTabsName}>
        {/* 将Tab导航作为Stack的一个入口页面 */}
        <Stack.Screen
          name={mainTabsName}
          component={MainTabs}
          options={{ headerShown: false }} // 隐藏Stack顶部导航栏，避免重复
        />
        {/* 注册Play页面到Stack导航 */}
        <Stack.Screen name={playName} component={PlayScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 确保PlayScreen组件存在

创建PlayScreen.js文件，示例代码如下：

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function PlayScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Play页面</Text>
      <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
        <Text style={styles.btnText}>返回Discover</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  backBtn: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#2196F3',
    borderRadius: 5,
  },
  btnText: {
    color: 'white',
  },
});

3. HomeScreen代码无需修改

你原来的HomeScreen.js中的跳转逻辑保持不变即可：

export default function HomeScreen({ navigation }) {
  const handlePress = () => {
    navigation.navigate('Play');
  };
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.text}>Meet People!</Text>
      </TouchableOpacity>
    </View>
  );
}

原理说明 #

外层的Stack导航作为根导航，包含了Tab导航（作为主界面）和Play页面，当从HomeScreen调用navigation.navigate('Play')时，根Stack导航会处理这个跳转，将Play页面叠加在Tab导航之上，实现独立页面的跳转效果。

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