如何在 react-native 中像 iOS 一样模态显示屏幕答案

【问题标题】：How to present a screen modally like iOS in react-native如何在 react-native 中像 iOS 一样模态显示屏幕
【发布时间】：2023-01-23 05:47:25
【问题描述】：

我想以模态方式呈现一个屏幕，将另一个屏幕推到后面，类似于在 iOS 应用程序中快速完成的方式。我不希望模态来自底部然后覆盖整个页面，我只希望它来自底部并将另一个屏幕推到后面。

这是我的意思的图像。

我怎样才能在本机反应中做到这一点？

这是我的代码：

> import { StyleSheet, Text, View } from 'react-native' import React
> from 'react' import { createStackNavigator } from
> '@react-navigation/stack' import { LoginScreen } from
> '../../features/account/screens/login.screen' import { RegisterScreen
> } from '../../features/account/screens/register.screen'
> 
> const Stack = createStackNavigator()
> 
> export const AccountNavigator = () => (
>     
>     <Stack.Navigator >
>         
>         <Stack.Screen
>             name="Login"
>             component={LoginScreen}
>             options={{
>                 headerShown:false,
>                 
>             }}
>         />
> 
>          <Stack.Screen
>             name="Register"
>             component={RegisterScreen}
>             options={{
>                 
>             }}
>            
>         />
> 
>     </Stack.Navigator>   
     )

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案1】：

你可以用演示道具来做；

     <Stack.Navigator presentation="modal" > ......//rest of the code

【讨论】：

这在 <Stack.Screen options={{ presentation:"modal"}}/> 内部有效，但它只允许我从顶部向下滑动，而不是从屏幕的任何地方向下滑动，这是为什么呢？

【解决方案2】：

您需要在模态中添加两件事

放：

animationType="slide" 

and

presentationStyle="pageSheet"

这将解决您的问题

【讨论】：