React Navigation v6底部标签导航中添加并调用模态屏幕的实现方法

1. 调整导航结构 #

模态屏幕不能直接嵌套在底部标签导航器中，需要先嵌套一层根栈导航器，将底部标签导航器和模态屏幕作为根栈的平级路由配置：

完整导航代码示例 #

// 未安装依赖先执行 npm install @react-navigation/native-stack
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
// 引入你自己实现的模态页面组件
import ModalScreen from './ModalScreen';

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

// 原有底部标签导航逻辑保持不变
function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

// 根导航器入口，直接在NavigationContainer中挂载该组件即可
export default function RootNavigator() {
  return (
    <RootStack.Navigator>
      {/* 底部标签导航作为根栈默认路由 */}
      <RootStack.Screen 
        name="MainTabs" 
        component={MyTabs} 
        options={{ headerShown: false }} 
      />
      {/* 模态屏幕配置，指定presentation为modal启用模态展示效果 */}
      <RootStack.Screen
        name="MyModal"
        component={ModalScreen}
        options={{
          presentation: 'modal',
          // 不需要系统默认头部可配置headerShown: false
        }}
      />
    </RootStack.Navigator>
  );
}

2. HomeScreen 中调用打开模态 #

在HomeScreen组件中通过useNavigation钩子获取导航实例，调用navigate方法跳转即可：

import { useNavigation } from '@react-navigation/native';
import { Button, View } from 'react-native';

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View>
      {/* 其他页面逻辑 */}
      <Button
        title="打开模态页"
        onPress={() => navigation.navigate('MyModal')}
      />
    </View>
  );
}

补充说明 #

• 关闭模态页直接调用 navigation.goBack() 即可
• 如需给模态页传参，在navigate方法第二个参数传入参数对象即可：navigation.navigate('MyModal', { id: 1, name: 'test' })，模态页可通过route.params获取传入的参数

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