从左到右的窗口动画与反应导航？答案

【问题标题】：From left to right window animation with react-navigation?从左到右的窗口动画与反应导航？
【发布时间】：2017-10-07 20:08:17
【问题描述】：

有没有办法使用 react-navigation 中的 navigate() 函数实现从左到右的动画？

提前致谢。

【问题讨论】：

是的，我认为这是可能的。签出这个reactnavigation.org/docs/views/transitioner
我检查了它，但它确实令人困惑。我的导航功能是这样的：

标签： react-native react-navigation

【解决方案1】：

由 satya164 在 react-navigation/stack github repo 中回答，在 defaultNavigationOptions/navigationOptions 中使用 gestureDirection: 'horizontal-inverted'

Screen: {
  screen: Screen,
  navigationOptions: {
    ...TransitionPresets.SlideFromRightIOS,
    gestureDirection: 'horizontal-inverted',
  },
},

https://reactnavigation.org/docs/en/stack-navigator.html#animation-related-options

【讨论】：

【解决方案2】：

定义屏幕时，可以使用transitionConfig 选项。

const Stack = StackNavigator(
  {
    SomeScreen: { screen: ... },
  },
  {
    transitionConfig: customAnimationFunc,
  }
);
...

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

const customAnimationFunc = () => ({
  screenInterpolator: sceneProps => {
    return CardStackStyleInterpolator.forVertical(sceneProps);
  },
});

应该做的工作。你当然可以定义自己的动画，或者返回 null 来禁用它；检查来源。

【讨论】：

那么在实现所有这些兄弟之后我应该如何安排我的导航功能？
您将使用导航功能，无需任何调整，动画将被照顾
有没有办法只在一个屏幕上实现这个？
如何在iOS中实现自下而上？尝试 .forHorizontal 或 forFadeFromBottomAndroid 但不起作用。还是从左到右

【解决方案3】：

我知道这已经过时了，但我也很难找到一个一次只针对一个屏幕执行此操作并最终使用 react-navigation-transitions 的配置。

import {createStackNavigator} from 'react-navigation-stack';
import {fromLeft, fromRight} from 'react-navigation-transitions';
import {ScreenA, ScreenB, ScreenC} from 'screens'; 

export const handleCustomTransition = ({scenes}) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  if (
    prevScene &&
    prevScene.route.routeName === 'ScreenA' &&
    nextScene.route.routeName === 'ScreenB'
  ) {
    return fromLeft();
  } else if (
    prevScene &&
    prevScene.route.routeName === 'ScreenA' &&
    nextScene.route.routeName === 'ScreenC'
  ) {
    return fromRight();
  }
};

const stack = createStackNavigator(
  {
    ScreenA: homeScreen,
    ScreenB: messageScreen,
    ScreenC: settingsScreen,
  },
  {
    transitionConfig: nav => handleCustomTransition(nav),
  }
);

【讨论】：