苦逼前端

React Native Navigator小结

Javascript2015-11-24 17:59

双平台的开发工作进展到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

评论(0)
  • 暂无评论,求挽尊...
还可输入200个字