react-navigation自定义StackNavigato

2018.02.09更新：
react-navigation内置跳转动画的路径发生了改变，由
react-navigation/src/views/CardStackStyleInterpolator 改为
react-navigation/src/views/CardStack/CardStackStyleInterpolator

----------------------------------------------　分割线　----------------------------------------------

使用StackNavigator跳转页面时，react-navigation根据平台的不同内置了相应的跳转动画。
内置的跳转动画在react-navigation/src/views/CardStack/CardStackStyleInterpolator中，共三种。forHorizontal:从右向左进入、forVertical:从下向上进入、forFadeFromBottomAndroid:从底部淡出。
关于修改默认的跳转动画或者自定义动画效果，以下给出两个场景。

修改整个栈内的页面跳转动画

这种场景是，一个栈内所有页面的跳转使用相同的动画效果，示例代码如下：

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const CustomerNavigator = StackNavigator({
  ScreenKey: { screen: MyScreen },
  // other screens
}, {
  transitionConfig: () => {
    screenInterpolator: CardStackStyleInterpolator.forVertical,
    transitionSpec: {
      duration: 250,
      easing: Easing.bounce,
      timing: Animated.timing,
    },
  },
});

在安卓上运行时，默认的跳转动画效果是forFadeFromBottomAndroid,经过上述配置，CustomerNavigator 内的页面切换时，会使用forVertical效果。
transitionSpec内可以配置与动画相关的属性。

通过传递参数决定某页面的跳转动画

在一个StackNavigator内，可能某些页面需要用forHorizontal的跳转方式，另一些需要用forVertical的跳转方式，以下是解决方案。

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const TransitionConfiguration = () => ({
  screenInterpolator: (sceneProps) => {
    const { scene } = sceneProps;
    const { route } = scene;
    const params = route.params || {};
    const transition = params.transition || 'forHorizontal';
    return CardStackStyleInterpolator[transition](sceneProps);
  },
});

const CustomerNavigator = StackNavigator({
  ScreenKey: { screen: MyScreen },
  // other screens
}, {
  transitionConfig: TransitionConfiguration,
});

假如希望CustomerNavigator内的某个页面使用forVertical的跳转动画效果，调用this.props.navigate('SomeScreenKey', { transition: 'forVertical' });切换页面即可。

总结

本文均使用react-navigation自带的跳转动画，因为这三种跳转方式可以满足很多需求，希望将来能内置更丰富的效果。
react-navigation支持自定义的跳转动画效果，获取sceneProps中的layout,position,scene属性，以及scene中的index属性，就能完成自定义动画的开发。具体可以参考这篇文章的内容。如果想对其动画原理有更深的了解，可以学习这篇文章。

参考资料

1. React Native Navigation, custom Scene (Screen) Transitions and interpolations
2. issue#1187--Add support for custom transitionConfig

原博文发布在个人博客，欢迎访问！！