时间戳

首页 > 解决方案 > 如何在 React Native 导航中使用 modalPresentationStyle .fullscreen

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

问题描述

我正在尝试创建我的第一个 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 显示视图。

当前模态演示

我怎样才能做到这一点？

标签： react-nativereact-navigation

解决方案

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

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

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

modalPresentationStyle: 'fullScreen'文档中也没有，Group组件也没有options道具。

推荐阅读