React Native Navigator 小结
双平台的开发工作进展到 60% 了,代码的可复用程度高的惊人,配合 ES6 的 spread, 只需要添加寥寥数行代码就可以很好的兼容双平台。
回头细化代码的时候,发现 iOS 有个坑,更确切的说是 NavigatorIOS 的坑,具体表现在:
如果设置隐藏 navigationBar, 那么右滑返回手势将失效,并且官方开发者明确表示,这是 Apple 平台的特性,他们将不会对此做支持
Android 平台也有问题,返回的时候,会在大概 1/3 的位置卡顿一下,但是我们查看了 Navigator 组件的代码,发现默认启用的动画配置是:
//node_modules/react-native/Libraries/Components/CustomComponents/Navigator/Navigator.js 268行
getDefaultProps: function() {
return {
configureScene: () => NavigatorSceneConfigs.PushFromRight,
sceneStyle: styles.defaultSceneStyle,
};
}
而这个 NavigatorSceneConfigs.PushFromRight 引用的是:
//与上面代码文件同目录的NavigatorSceneConfigs.js 487行
var BaseConfig = {
// A list of all gestures that are enabled on this scene
//此处是开启右滑返回手势
gestures: {
pop: BaseLeftToRightGesture,
},
// Rebound spring parameters when transitioning FROM this scene
springFriction: 26,
springTension: 200,
// Velocity to start at when transitioning without gesture
defaultTransitionVelocity: 1.5,
// Animation interpolators for horizontal transitioning:
animationInterpolators: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(FadeToTheLeft),
},
};
var NavigatorSceneConfigs = {
PushFromRight: {
...BaseConfig,
// We will want to customize this soon
}
//其他定义好的动画
};
我们可以看到,这个动画配置里面有一系列的相关参数,其中与动画过程相关的就是 animationInterpolators 这个属性,它分别定义了进场和出场的动画(这些进出场动画在该文件顶部都有定义),了解了这些配置,我们就可以灵活定义各种进出场动画了,例如:
<Navigator
style={styles.container}
ref={(navigator) => {
if(navigator !== this._navigator){
this._navigator = navigator;
}
}}
initialRoute={{
component: Index,
passProps: {
selectedTab: 2,
},
}}
renderScene={(route, navigator) => {
var Component = route.component;
return (
<Component navigator={navigator} {...route.passProps} />
);
}}
//配置动画
configureScene={(route) => {
if(route.sceneConfig){
return route.sceneConfig;
}
var sceneConfig = {
//下面一行定义了想要继承哪个动画的属性
...Navigator.SceneConfigs.FloatFromRight,
//此处书写想要改变的属性,如定义进出场动画的animationInterpolators等
};
return sceneConfig;
}}
/>
涉及到 iOS 平台,要么不隐藏 navigationBar, 使用 NavigatorIOS 自带的右滑返回,如果一定要隐藏 navigationBar, 那就只能使用 Navigator, 然后定义一组跟原生进出场动画相同的动画了。
react-native: 0.14.2