React Navigation(v5)能否实现UIModalPresentationPageSheet/FormSheet样式模态框？

当然可以实现！React Navigation v5配合react-native-screens确实支持iOS的原生模态框样式，你遇到的问题大概率是配置位置不对，或者对苹果的模态样式平台差异不了解，下面一步步帮你解决：

先明确两个核心要点 #

• react-native-screens是实现原生模态样式的核心依赖，确保你已经安装了它（React Navigation v5默认推荐使用），版本建议在v2.0.0及以上
• 苹果的UIModalPresentationFormSheet在iPhone上默认是全屏展示，只有在iPad上才会显示为居中的表单样式弹窗；而UIModalPresentationPageSheet在iPhone上是半屏可下拉关闭的样式，iPad上是页式弹窗——这是iOS系统原生的行为，不是React Navigation的问题

修正你的代码配置 #

你之前把stackPresentation设置在了全局的Stack.Navigator的screenOptions里，这会让所有屏幕都应用这个配置，而我们只需要给作为模态框的DetailsScreen单独设置：

import "react-native-gesture-handler"
import * as React from "react"
import { Button, View, Text } from "react-native"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate("Details")} />
    </View>
  )
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
    </View>
  )
}

const Stack = createStackNavigator()

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal" initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* 仅给模态目标屏幕设置stackPresentation */}
        <Stack.Screen 
          name="Details" 
          component={DetailsScreen} 
          options={{ 
            stackPresentation: "formSheet", // 可替换为"pageSheet"测试不同效果
          }} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default App

测试不同样式的实际效果 #

• 若设置stackPresentation: "pageSheet"：iPhone上会打开半屏模态框，支持下拉关闭；iPad上是页式弹窗
• 若设置stackPresentation: "formSheet"：iPhone上是全屏（系统原生规则），iPad上是居中的表单样式弹窗

额外提示：iPhone上实现类似FormSheet的非全屏效果 #

如果想在iPhone上实现居中的表单样式弹窗（和iPad的FormSheet一致），原生的UIModalPresentationFormSheet做不到，你可以：

• 用React Native原生的Modal组件配合自定义样式手动实现
• 借助第三方库（比如react-native-modal）快速搭建自定义居中模态框

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