web-dev-qa-db-fra.com

Comment désactiver la transition du navigateur de pile de React Navigation?

Dans React native (iOS), Navigateur de pile de React navigation a une animation de transition par défaut pour déplacer les écrans vers la gauche ou la droite en fonction de l'ordre de la pile. Existe-t-il un moyen de désactiver l'animation de transition?

react-nativereact-navigation
8
Suresh Murali

J'espère que cela vous aidera. Veuillez essayer comme ci-dessous.

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

export const Navigator = StackNavigator(RouteConfiguration,StackNavigatorConfig)
7
Ilnur

Je ne pense pas qu'il existe une variable booléenne qui contrôle l'animation de transition. Nous ne pouvons donc pas masquer directement l'animation.

Mais il y a une variable qui contrôle la durée de l'animation!

Essayez ceci ~ ↓

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

React Navigation 5

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

Vous pouvez désactiver les animations de transition avec l'option de navigation animationEnabled. Documents

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

Vous voudrez peut-être passer ceci dans navigationOptions à la place selon votre cas d'utilisation.

3
Fook

Mise à jour pour react-native: 0.61.5

Nous avons pu désactiver les animations/transitions en utilisant les accessoires ci-dessous dans navigationOptions.

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

Les autres packages pertinents que nous utilisons sont:

  • "react-navigation": "~ 4.0.10"
  • "react-navigation-stack": "^ 2.1.0"
  • "react-native-screens": "2.0.0-beta.2"
2
Nithya Sivakumar

Dans la dernière version de react-native (dans mon cas:)

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

mettez simplement la configuration suivante:

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