如何禁用反应导航的堆栈导航器过渡？

Question

在React native（iOS）中，React导航的堆栈导航器具有默认的过渡动画，可根据堆栈顺序向左或向右移动屏幕。有什么方法可以禁用过渡动画吗？

Answer 1

React Navigation 5 及以上

{/* 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>

这里有更多选项https://reactnavigation.org/docs/stack-navigator/

Answer 2

反应导航 v6：

screenOptions={{ animation: 'none' }}在导航器上使用可禁用导航器内的所有动画

或者

options={{ animation: 'none' }}在您不想在没有动画的情况下导航到的屏幕上使用。

代码示例：

<Stack.Navigator screenOptions={{ animation: 'none' }}>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Store" options={{ animation: 'none' }} component={Store} />
</Stack.Navigator>

Answer 3

您可以使用animationEnabled导航选项禁用过渡动画。文档

defaultNavigationOptions: ({navigation}) => ({
  animationEnabled: false,
})

您可能希望navigationOptions根据您的用例传递它。

Answer 4

希望对您有帮助。请尝试以下方法。

const StackNavigatorConfig = {
  [...]
  transitionConfig : () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
      },
  }),
}

export const Navigator = StackNavigator(RouteConfiguration,StackNavigatorConfig)

Answer 5

我认为没有布尔变量控制过渡动画。所以我们不能直接隐藏动画。

但是有一个变量控制动画持续时间！

试试这个~？

const RootStackNavigator = createStackNavigator({
  // ...
}, {
  transitionConfig: () => ({
    transitionSpec: {
      duration: 0,  // Set the animation duration time as 0 !!
    },
  }),
});

Answer 6

反应原生更新：0.61.5

我们能够使用导航选项中的以下道具关闭动画/过渡。

animationEnabled:false,
transitionConfig: () => ({
  transitionSpec: {
    duration:0,
    timing: 0,
  },
})

我们正在使用的其他相关软件包是：

• “反应导航”：“~4.0.10”
• “反应导航堆栈”：“^ 2.1.0”
• "react-native-screens": "2.0.0-beta.2"