如何在React Native Navigation中实现modalPresentationStyle .fullscreen效果

你代码的问题出在配置属性的位置和presentation取值不正确，按以下修改即可实现完全铺满的全屏模态效果：

核心修改点 #

• React Navigation v6+ 已经通过presentation配置封装了原生模态样式，直接取值fullScreenModal即可对应iOS的UIModalPresentationFullScreen效果，完全遮挡下层页面
• 样式配置需要放在Stack.Group的screenOptions属性中，而非单独的options属性

修改后代码示例 #

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { View, Text, Button, SafeAreaView } from "react-native";
const Stack = createStackNavigator();

// 注册页使用SafeAreaView适配系统安全区，避免内容顶到状态栏/底部操作条
function RegisterScreen({ navigation }) {
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
      <Text style={{ fontSize: 30 }}>Register Screen</Text>
      <Button onPress={() => navigation.goBack()} title="Go back" />
    </SafeAreaView>
  );
}

function LoginScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>Login Screen</Text>
      <Button onPress={() => navigation.navigate('Register')} title="Go to Register" />
    </View>
  );
}

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      </Stack.Group>
      {/* 仅修改这部分的screenOptions配置即可 */}
      <Stack.Group 
        screenOptions={{ 
          presentation: "fullScreenModal", 
          headerShown: false 
        }}
      >
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Group>
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

低版本兼容（React Navigation v5） #

如果你使用的是v5版本，没有fullScreenModal取值，可以直接在screenOptions中配置原生属性：

screenOptions={{
  presentation: 'modal',
  headerShown: false,
  cardStyle: { flex: 1 },
  // iOS原生模态样式配置
  modalPresentationStyle: 'fullScreen'
}}

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