React Native 0.66版本iOS端如何实现全屏Modal效果

解决方案 #

你遇到的顶部间距是iOS端presentation: 'modal'的默认表现，该配置对应原生UIModalPresentationPageSheet样式，天生保留顶部空隙、支持下拉关闭。要实现你需要的全屏模态效果，只需要修改App.js里的Stack.Group配置即可：

1. 将presentation属性的值从modal修改为fullScreenModal
2. 如果不需要模态页面的默认导航栏，可以额外添加headerShown: false配置

修改后的代码片段如下：

<Stack.Group 
  screenOptions={{
    presentation: 'fullScreenModal',
    headerShown: false // 不需要导航栏可保留该配置，需要则删除
  }}
>
  <Stack.Screen name="Screen_B" component={Screen_B} />
</Stack.Group>

修改完成后重新运行项目，Screen B就会完全铺满屏幕，和iOS原生presentationStyle = .fullScreen的行为完全一致。

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