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属性，就能完成自定义动画的开发。具体可以参考这篇文章的内容。如果想对其动画原理有更深的了解，可以学习这篇文章。
参考资料
- React Native Navigation, custom Scene (Screen) Transitions and interpolations
- issue#1187--Add support for custom transitionConfig
原博文发布在个人博客，欢迎访问！！
