如何在 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 一直显示到底部的安全区域。

我怎样才能做到这一点？

Answer 1

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

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

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

文档中也没有 modalPresentationStyle: 'fullScreen'，并且 Group 组件不采用 options 属性。

Answer 2

已接受的答案指出：

If you want a full-screen screen, you probably don't want a modal.

这不一定是真的。使用

screenOptions={{ presentation: 'transparentModal' }}

或

screenOptions={{ presentation: 'fullScreenModal' }}

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

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

How to use modalPresentationStyle .fullscreen in React Native navigation

react-native

react-navigation