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

Question

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

在 Android 和 IOS 上，默认的 Stack Navigator 模式是“card”，但在测试时，会发生简单的导航转换。即使指定了 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需要更多关于屏幕如何需要转换的信息。实际工作不会失败的是文档中描述的预制配置中的转换预设。

参考链接：

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