React Navigation 5.x 基于 param 的导航过渡动画答案

【问题标题】：React Navigation 5.x navigation transition animation based on paramReact Navigation 5.x 基于 param 的导航过渡动画
【发布时间】：2020-11-24 05:52:39
【问题描述】：

是否可以根据特定传递的参数启用/禁用导航过渡动画？

navigation.navigate('SomeScreen', {
          data: someData,
          withAnimation: true,
        });

在上面的示例中，withAnimation 参数设置为 true，所以我希望此处设置的动画 (forRevealFromBottomAndroid) 处于活动状态：

<Stack.Screen
        name="SomeScreen"
        component={SomeScreen}
        options={{
          headerLeft: null,
          headerShown: false,
          cardStyleInterpolator:
            CardStyleInterpolators.forRevealFromBottomAndroid,
        }}
      />

【问题讨论】：

标签： reactjs react-native animation react-navigation

【解决方案1】：

是的有可能。您可以通过以下方式实现：

在您的导航器中：

<Stack.Screen
        name="SomeScreen"
        component={SomeScreen}
        options={({route: {params}}) => ({
          headerLeft: null,
          headerShown: false,
          cardStyleInterpolator: params?.withAnimation
              ? CardStyleInterpolators.forHorizontalIOS
              : CardStyleInterpolators.forNoAnimation,
        })}
/>

您在哪里导航：

navigation.navigate('SomeScreen', {
    data: someData,
    withAnimation: true
});

【讨论】：

【解决方案2】：

是的，你可以这样做：

let animation = false;
cardStyleInterpolator: animation ? CardStyleInterpolators.forNoAnimation : CardStyleInterpolators.forHorizontalIOS

【讨论】：