React Native：Stack Navigator mode='card' 或 mode='modal' 不起作用（世博项目）答案

【问题标题】：React Native: Stack Navigator mode='card' or mode='modal' is not working (expo project)React Native：Stack Navigator mode='card' 或 mode='modal' 不起作用（世博项目）
【发布时间】：2021-03-25 16:17:28
【问题描述】：

在堆栈导航时，mode="card" 或 mode="modal" 都不起作用。 在 OnePlus 5T 和 Android Studio(Google Pixel) 中测试

在 Android 和 IOS 上，默认 Stack Navigator 模式是“卡片”，但在测试时，会发生简单的导航转换。即使在指定了 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>

  );
}

【问题讨论】：

如果你使用mode='modal'并且想要改变过渡，你必须设置headerMode='flaot' or 'screen'。还要检查这个：reactnavigation.org/docs/stack-navigator/#mode

标签： javascript react-native expo react-native-navigation react-navigation-stack

【解决方案1】：

我在尝试将屏幕转换应用到我的 react 本机应用时遇到了类似的问题。 mode 视觉选项似乎需要更多关于屏幕如何需要转换的信息。 真正有效的东西是文档中描述的Transition Presets in the Pre-Made Configs。

来自链接的参考：

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 中完成的那样，这将添加过渡到所有上述屏幕。

【讨论】：

【解决方案2】：

mode="modal" 被移除以支持显示：'modal'

presentation: 'modal' 显示 iOS 13 中引入的新演示样式模式。它还会自动调整标题中的状态栏高度等您以前必须手动执行的操作。

如果您不想使用新动画，可以使用动画相关选项将其更改为您喜欢的。要使用 React Navigation 5 中的 iOS 模态动画，请使用 TransitionPresets.ModalSlideFromBottomIOS。

此外，还有一个新的演示文稿：“transparentModal”选项，可以更轻松地构建透明模式。

【讨论】：