javascript - react 原生 : Stack Navigator mode ='card' or mode ='modal' is not working (expo project)

Question

在堆栈导航时，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>

  );
}

Answer 1

我在尝试将屏幕转换应用到我的 react native 应用时遇到了类似的问题。似乎 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 , < em>DefaultTransition , ModalTransition

这些都是 iOS 和 Android 提供的标准转场

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