React Native使用react-navigation跳转非Tab路由页面问题求助

你的需求非常常见——想要在Tab导航的基础上跳转到额外页面，但又不想让这些页面出现在底部Tab栏里。核心解决方案就是使用嵌套导航，把每个Tab对应的屏幕包装成一个StackNavigator，这样每个Tab内部可以拥有自己的页面栈，跳转的子页面不会显示在Tab栏上。

下面结合你现有的代码，一步步实现：

1. 调整导航结构：Tab + Stack嵌套 #

首先，你需要导入StackNavigator（如果是react-navigation v1版本），然后为每个Tab创建对应的Stack导航，把需要跳转的页面（比如Appointments、新增/编辑页）放到对应的Stack里：

import React, {Component} from 'react';
import { AppRegistry } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import HomeScreen from './src/ScreenDashboard';
import TodosScreen from './src/ScreenTodos';
import ContactsScreen from './src/ScreenContacts';
// 导入你需要跳转的新页面
import AppointmentsScreen from './src/ScreenAppointments';
import AddItemScreen from './src/ScreenAddItem';
import EditTodoScreen from './src/ScreenEditTodo';

// 为Home Tab创建专属的Stack导航
const HomeStack = StackNavigator({
  // 初始页面就是原来的HomeScreen
  Home: { screen: HomeScreen },
  // 把需要跳转的页面都加到这个栈里
  Appointments: { screen: AppointmentsScreen },
  AddItem: { screen: AddItemScreen },
});

// 同理，为Todos Tab创建Stack（如果需要跳转编辑页的话）
const TodosStack = StackNavigator({
  Todos: { screen: TodosScreen },
  EditTodo: { screen: EditTodoScreen },
});

// Contacts Tab的Stack（如果需要搜索页的话）
const ContactsStack = StackNavigator({
  Contacts: { screen: ContactsScreen },
  SearchContact: { screen: SearchContactScreen },
});

// 原来的TabNavigator现在指向这些Stack，而不是直接指向单个屏幕
const AppWithNavigation = TabNavigator(
  {
    Home: { screen: HomeStack },
    Todos: { screen: TodosStack },
    Contacts: { screen: ContactsStack }
  },
  {
    // 保留你原来的Tab配置，比如tabBarPosition、tabBarOptions等
  }
);

2. 在页面中正常跳转 #

现在在HomeScreen里，你可以和之前一样使用navigate跳转到Appointments或AddItem页面，这些页面不会出现在底部Tab栏，而且跳转后底部Tab栏依然保留：

// 在HomeScreen组件内部
const { navigate } = this.props.navigation;

// 跳转到预约页面
<Button onPress={() => navigate('Appointments')} title="查看我的预约" />

// 跳转到新增条目页面
<Button onPress={() => navigate('AddItem')} title="新增条目" />

原理说明 #

嵌套导航的核心逻辑是：每个Tab对应一个独立的页面栈，只有栈的初始页面（比如Home、Todos）会显示在Tab栏中，栈里的其他页面都是该Tab的"子页面"，通过栈导航跳转时，Tab栏会保持显示，同时这些子页面不会出现在Tab标签里。

补充：全局页面的处理（比如登录、设置） #

如果有些页面不属于任何Tab（比如登录页、全局设置页），你可以把整个Tab导航嵌套到一个根Stack里，这样就能在任何地方跳转到这些全局页面：

// 创建根Stack导航
const RootStack = StackNavigator({
  // 把原来的Tab导航作为主页面
  Main: { screen: AppWithNavigation },
  // 全局页面
  Login: { screen: LoginScreen },
  Settings: { screen: SettingsScreen },
}, {
  // 默认显示主Tab页面
  initialRouteName: 'Main',
});

如果你用的是React Navigation v5+/v6版本 #

现在新版本的react-navigation写法略有不同，但核心思路还是嵌套。比如v6的写法：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

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

// Home Tab的Stack
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Appointments" component={AppointmentsScreen} />
      <Stack.Screen name="AddItem" component={AddItemScreen} />
    </Stack.Navigator>
  );
}

// 其他Tab的Stack同理...

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Todos" component={TodosStack} />
        <Tab.Screen name="Contacts" component={ContactsStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

跳转方式和之前完全一致，用navigation.navigate('Appointments')即可。

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