React Native：堆栈导航器模式='card'或模式='modal'不起作用(expo项目)

Question

堆栈导航时，模式="卡"或模式="模态"都不起作用。在OnePlus 5T和Android Studio(Google Pixel)中进行测试

在Android和IOS上，默认的堆栈导航器模式是"卡片"，但在测试时，会发生简单的导航转换。 即使在指定 mode="card" 或 mode="modal" 之后，导航时仍然不会显示对过渡的影响。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, Button } from 'react-native';

const First=({navigation})=>{
return (
<>
<Text>First Page</Text>
<Button title="Second Page" onPress={()=>navigation.navigate("Second")}/>
</>);
}

const Second=()=>{
return (
<Text>Second Page</Text>);
}

const Stack=createStackNavigator();
const StackNavigate=()=>{
return (
<Stack.Navigator mode='modal'>
<Stack.Screen name="First" component={First}/>
<Stack.Screen name="Second" component={Second}/>
</Stack.Navigator>)
}

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

Answer 1

我在尝试将屏幕过渡应用于我的 react 本机应用程序时遇到了类似的问题。似乎mode视觉选项需要更多关于屏幕如何需要过渡的信息。实际工作正常的东西是文档中描述的预制配置中的过渡预设。

来自链接的参考：

import { TransitionPresets } from '@react-navigation/stack';
// ...
<Stack.Screen
name="Profile"
component={Profile}
options={{
title: 'Profile',
...TransitionPresets.ModalSlideFromBottomIOS,
}}
/>;

当前可用的转换包括：

SlideFromRightIOS，ModalSlideFromBottomIOS，ModalPresentationIOS，FadeFromBottomAndroid，RevealFromBottomAndroid，ScaleFromCenterAndroid，DefaultTransition，ModalTransition

所有这些都是iOS和Android提供的标准过渡

为了使此过程更加简洁和容易，您可以尝试在定义导航器时使用defaultNavigationOptions添加这些过渡，就像在 ReactNavigation4.x 中完成的那样，这会将过渡添加到所有上述屏幕中。

Answer 2

mode="modal"被删除，取而代之的是演示："modal">

演示文稿："模态"显示 iOS 13 中引入的新演示样式模态。它还会自动调整标题中的状态栏高度等内容，您以前必须手动执行此操作。

如果您不想使用新动画，可以使用动画相关选项根据自己的喜好进行更改。要使用 React Navigation 5 中的 iOS 模态动画，请使用 TransitionPresets.ModalSlideFromBottomIOS。

此外，一个新的演示文稿："透明模态"选项，使构建透明模态变得更加容易。

Answer 3

这对我有用：：：：

import { TransitionPresets } from '@react-navigation/stack';
// ...
<Stack.Navigator
screenOptions={({ route, navigation }) => ({
...TransitionPresets.ModalPresentationIOS,
})}
>
<Stack.Screen name="first" component={first} />
<Stack.Screen name="second" component={second} />
</Stack.Navigator>;```