如何防止 react-navigation 在 StackAction.reset 期间显示过渡动画？答案

【问题标题】：How do I prevent react-navigation from showing a transition animation during StackAction.reset?如何防止 react-navigation 在 StackAction.reset 期间显示过渡动画？
【发布时间】：2020-05-02 12:24:27
【问题描述】：

使用 react-navigation-stack 1.10.3，重置 StackActions 会在没有过渡的情况下将新堆栈加载到位。与 react-navigation-stack 2.0.15 相同的代码 sn-p 添加了一个平台默认转换，对于 iOS，它是 SlideFromRightIOS。

如何在 1.10.X 和 2.0.X 上复制以前的行为，在堆栈重置时没有转换？

navigation.dispatch(
    StackActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({
                routeName: user ? 'Home' : 'Landing',
            }),
        ],
    }),
);

【问题讨论】：

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

【解决方案1】：

您可以通过在Home 和Landing 屏幕的navigationOptions 中添加animationEnabled: false 来禁用这些屏幕的动画。

Home.navigationOptions = {
  animationEnabled: false
}

【讨论】：

效果很好！谢谢！
嗨，@satya164 如果有一种方法可以禁用“from-route”而不是您要移动到的动画，那就太好了。

【解决方案2】：

React 导航 V5

{/* Screen level */}
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="HomeScreen"
      component={HomeScreen}
      options={{
        animationEnabled: false,
      }}
    />
  </Stack.Navigator>
</NavigationContainer>

{/* Whole navigation stack */}
<Stack.Navigator screenOptions={{ animationEnabled: false }}></Stack.Navigator>

否则，您可以这样做以避免在 android 中出现闪烁效果：

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

<Stack.Navigator 
initialRouteName="CustomFooter" headerMode="none" 
screenOptions={{ cardStyleInterpolator: Platform.OS == 'ios' ? CardStyleInterpolators.forHorizontalIOS : CardStyleInterpolators.forNoAnimation }} >
</Stack.Navigator >

【讨论】：