web-dev-qa-db-fra.com

Comment changer la direction de l'animation dans StackNavigator?

Comment changer la direction de l'animation dans StackNavigator?

Comportement actuel

Lorsque l'utilisateur passe à un autre écran, l'écran vole de de bas en haut.

Comportement prévisible

Lorsque l'utilisateur passe à un autre écran, l'écran vole de de droite à gauche. (Comme Facebook ou Instagram!)

Code StackNavigator

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
    // I guess we can do something here
});
  • Si nous pouvons régler la durée de l'animation, ce sera encore mieux! Actuellement, il semble que l'écran vole du milieu de l'écran vers le haut. Je veux une animation naturelle comme Facebook ou Instagram :)

Merci d'avance,

animationreact-nativereact-navigation
10
hellofanengineer

Sur iOS, c'est un comportement standard. Android nécessite un peu de configuration. Il y a deux options que vous pouvez utiliser pour définir les transitions d'écran: mode et transitionConfig. Dans ce cas transitionConfig marchera:

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// this path can be different depending on react-navigation version, this one is for @1.0.0-beta.15 

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
})

Nous utilisons CardStackStyleInterpolator de la source React-Navigation, mais vous pouvez fournir une transition personnalisée si vous le souhaitez, voici comment faire n ou ici ou cet article .

mode est plus pour le comportement par défaut:

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    mode: 'card',
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
});

mode ne peut avoir que deux valeurs:

  • card - Utilisez les transitions d'écran iOS standard (de droite à gauche) et Android (de bas en haut). C'est la valeur par défaut.

  • modal - Faites glisser les écrans depuis le bas, ce qui est un modèle iOS commun. Fonctionne uniquement sur iOS, n'a aucun effet sur Android.

11
zarcode

Réponse mise à jour:

import ReactNavigation from "react-navigation";
createStackNavigator({...},{
  transitionConfig: () =>
    ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})
6
Tim

Pour react navigation 5.0 quelque chose comme ça semble fonctionner:

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

const Stack = createStackNavigator();
export default () => (
   <Stack.Navigator
      screenOptions={{
         cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}
   >
      <Stack.Screen name="Screen 1" component={ScreenComponent1} />
      <Stack.Screen name="Screen 2" component={ScreenComponent2} />
   </Stack.Navigator>
);

Plus d'informations ici: https://reactnavigation.org/docs/en/stack-navigator.html#pre-made-configs

3
Daniel Loiterton

Ici, je viens de poster ma réponse pour que vous puissiez changer le sens de l'animation! C'est tout! La réponse que vous avez acceptée est juste par défaut!

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
});

De cette façon, les transitions d'écran deviendront de droite à gauche sur les deux plateformes! Ce à quoi vous devez faire plus attention, c'est que vous pouvez définir toutes les transitions d'écran que vous voulez en utilisant les accessoires transitionConfig!

1
木大白易

La solution est très simple. Dans React navigation 4.x vous pouvez faire comme ça

import {createAppContainer} de 'react-navigation' 
 import {createStackNavigator, StackViewTransitionConfigs} de 'react-navigation-stack'; 
 
 const Navigation = createStackNavigator ({
 screenA: ComponentA, 
 screenB: ComponentB, 
}, {
 mode: 'card', 
 transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS, 
} 
 
 export const AppNavigation = createAppContainer (Navigation)

Remarque: Vous pouvez également effectuer cette transition dans les versions de navigation React précédentes, mais vous devez modifier le import

0
Pushpanathan K