Question

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

Answer 1

反应导航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

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

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

根据您的使用情况，您可能想在navigationOptions中传递它。

Answer 3

更新本机：0.61.5

我们可以使用NavigationOptions中的以下道具关闭动画/过渡。

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

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

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

Answer 4

希望对您有帮助。请尝试如下操作。

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

export const Navigator = StackNavigator(RouteConfiguration,StackNavigatorConfig)

Answer 5

对于我来说，我正在为主屏幕禁用动画。

“反应导航”：“ ^ 4.3.9”，

“反应导航堆栈”：“ ^ 2.7.0”，

const StackNavigator = createStackNavigator(
{
    SplashScreen: SplashScreen,
    MainScreen: {
        name: 'HomeScreen',
        screen: HomeScreen,
        navigationOptions: ({ navigation }) => ({
            animationEnabled: false,
            transitionConfig: () => ({
                transitionSpec: {
                    duration: 0,
                    timing: 0,
                },
            })
        }),
    },
},
{
    initialRouteName: 'SplashScreen',
    headerMode: 'none'
})

Answer 6

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

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

尝试一下〜↓

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

Answer 7

在最新版本的react-native中（以我为例：）

"react-native": "0.60.5",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",

只需放置以下配置：

transitionConfig: () => ({
  transitionSpec: {
    timing: Animated.timing,
  },
  screenInterpolator: () => {},
}),

Answer 8

反应导航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 >

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

8 个答案: