TransitionPresets 不起作用。反应导航版本 6

Question

我最近从 v4 升级到 v6。
结果，TransitionPresets 似乎停止工作了。

<Stack.Screen
  name="Home"
  component={Home}
  options={{ ...TransitionPresets.ModalSlideFromBottomIOS }}
/>

我不认为它的使用方法有什么错误。
https://reactnavigation.org/docs/stack-navigator/#transitionpresets

还有其他人遇到过类似的问题吗？

编辑2021-11-17

对不起。
我想我不明白本机堆栈和堆栈之间的区别。
我使用了普通堆栈并且它有效。

Answer 1

在导航 v6 中

<Stack.Navigator
  screenOptions={{
    animation: 'fade_from_bottom',
  }}>
</Stack.Navigator>

动画选项应该是：

StackAnimationTypes = 'default' | 'fade' | 'fade_from_bottom' | 'flip' | 'none' | 'simple_push' | 'slide_from_bottom' | 'slide_from_right' | 'slide_from_left'

Answer 2

我遇到了同样的问题，当切换版本并编辑 Stack 的编写方式时，我注意到它们重定向到不同的库。

更改自：

import { createNativeStackNavigator, TransitionPresets } from '@react-navigation/native-stack';

对于：

import { createStackNavigator, TransitionPresets, } from '@react-navigation/stack';

并且在创建堆栈时也进行了编辑：

const Stack = createNativeStackNavigator();

对于：

const Stack = createStackNavigator();

Answer 3

您需要在 Stack.Navigator 的 screenOptions 属性中添加 TransitionPresets。只需按如下方式输入即可。

<Stack.Navigator screenOptions={{...TransitionPresets.SlideFromRightIOS}}>
  <Stack.Screen name="screenName" component={screenComponent} />
</Stack.Navigator>

Answer 4

在谷歌搜索中发现了这个并解决了相关问题，所以我想我会发布并分享以防其他人可能会发现它有用。我发现卡片演示模式在

"@react-navigation/native-stack": "^6.9.22";

和

fade_from_bottom

中导航时存在相当严重的帧/屏幕重影问题，这似乎是解决方案，但这些演示并未在本机堆栈中正式记录。

    <NativeStack.Navigator
        initialRouteName={homeScreenString}
        screenOptions={({ route }: { route: RouteProp<ParamListBase> }) => ({
            ...
            presentation: 'fade_from_bottom'
        })}>
        <NativeStack.Screen
            ...
        />
        <NativeStack.Screen
            ...
        />
    </NativeStack.Navigator>