react-navigation自定义StackNavigato
2018-12-28 本文已影响46人
咸鱼Jay
使用StackNavigator跳转页面时,react-navigation根据平台的不同内置了相应的跳转动画。
经过参考网络上的方法发现react-navigation内置跳转动画的路径发生了改变,由
react-navigation/src/views/CardStackStyleInterpolator
改为
react-navigation/src/views/CardStack/CardStackStyleInterpolator
但是我都使用了上面的几个,发现还是报错,经过查看我的react-navigation源码(2.18.2)发现,路径又变了,而且名称也变了:import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator.js'
其中StackViewStyleInterpolator.js
有
- forHorizontal:从右向左进入
- forVertical:从下向上进入
- forFadeFromBottomAndroid:从底部淡出
- forFade:无动画
具体使用:
import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator.js'
/**
* 导航器
*/
export const AppStackNavigator = createStackNavigator({
initPage:InitPage,
},{
initialRouteName: 'initPage',
//去掉所有页面的Title
navigationOptions: {
header: null
},
transitionConfig:()=>({
// 只要修改最后的forVertical就可以实现不同的动画了。
screenInterpolator:StackViewStyleInterpolator. forVertical,
})
});