如何在React Native导航中使用modalPresentationStyle .fullscreen

Question

我正在尝试创建我的第一个 React Native 应用程序。我有一个登录屏幕，如果用户想要注册，我想从该屏幕导航到注册屏幕。

为了实现这一目标，我正在考虑在第一个屏幕（登录）上方打开一个模式。我创建了以下内容：

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

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

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: "modal", headerShown: false }} options={{modalPresentationStyle: 'fullScreen'}}>
        <Stack.Screen name="Register" component={RegisterScreen} />
      </Stack.Group>
    </Stack.Navigator>
  )
}

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

模态显示，效果非常好。但是，正如您在下面的屏幕截图中看到的，模式显示为 modalPresentationStyle .automatic（在 iOS 中）。我希望它显示为 .fullScreen，因此层次结构在屏幕中不可见。基本上，我希望视图从 safeArea/statusBar 一直显示到底部的 safeArea。

我怎样才能实现这个目标？

Answer 1

React Native 中的术语与本机应用程序中的术语不同。如果您想要全屏屏幕，您可能不需要模式。如果你想要垂直动画，请根据文档更改动画：

screenOptions={{ cardStyleInterpolator: CardStyleInterpolators. forVerticalIOS, headerShown: false }}

https://reactnavigation.org/docs/stack-navigator/#animation-lated-options

文档中也没有

modalPresentationStyle: 'fullScreen'

，并且

Group

组件不采用

options

属性。

Answer 2

接受的答案指出：

如果您想要全屏屏幕，您可能不需要模态框。

这不一定是真的。使用

screenOptions={{ presentation: 'transparentModal' }}

或

screenOptions={{ presentation: 'fullScreenModal' }}

对于全屏模态动画，您无法在 iOS 上关闭。

Answer 3

第二个答案不适用于反应导航版本 6.0