React Native 下拉刷新添加自定义动画

在上一章中React Native 之自定义下拉刷新中,已经完成了对React Native中封装与使用下拉刷新,但在实际项目中,经常需要在下拉刷新中添加各种动画效果.
http://www.jianshu.com/p/47ffaec2433a
如下:



当用户往下拉时,鸡蛋的蛋壳 会往上移动;触发刷新时,播放一段鸡蛋摇晃的动画效果;当刷新完毕时,鸡蛋从上往下掉,最后盖住鸡蛋壳.

实现原理:

在React Native中要使用该效果,光靠js 可能是不够的,光是播放 帧动画,React Native也没有实现该效果的控件. 所以最简单的办法 是将鸡蛋与蛋壳的逻辑都放入原生代码中实现, React Native端告诉原生代码移动的距离与状态.

关键代码:

封装View ,使用

UIManager.dispatchViewManagerCommand

调用View的方法.

var React = require('React');
var ReactNative = require('ReactNative');
var requireNativeComponent = require('requireNativeComponent');

var UIManager = require('UIManager');
import {
View,
} from 'react-native';

const PK_REF_KEY="pk_ref_key";

var PluImageLayout =React.createClass({

propTypes: {
...View.propTypes,
},
/**调用蛋壳向上移动的原生方法*/
shellUpward:function(distance){
UIManager.dispatchViewManagerCommand(
this.getPluImageHandle(),
1,
[distance]
);
},
/**调用鸡蛋摇动帧动画的原生方法*/
loadingAnim:function () {
UIManager.dispatchViewManagerCommand(
this.getPluImageHandle(),
2,
null
);
},
/**调用恢复蛋壳位置的原生方法*/
resetShell:function (distance,maxLength,maxTime) {
UIManager.dispatchViewManagerCommand(
this.getPluImageHandle(),
3,
[distance,maxLength,maxTime]
);
},

render:function () {
return (
<RCTPluImageLayout
style={{width:38,height:70,marginRight:10,marginTop:-20}}
ref={PK_REF_KEY}
>
</RCTPluImageLayout>
);
},
/**找到控件的节点*/
getPluImageHandle: function() {
return ReactNative.findNodeHandle(this.refs[PK_REF_KEY]);
},
});

var RCTPluImageLayout = requireNativeComponent('AndroidPluImageLayout', PluImageLayout);

module.exports = PluImageLayout;

在React Native的touchMove事件中使蛋壳移动

if (lastMoveY===0){
lastMoveY=gestureState.y0;
}
//到了一定长度后,让蛋壳上升
//  >90 只有移动到了视野可见范围才开始移动蛋壳
if (gestureState.dy>90){
//移动的距离
let distance=gestureState.moveY-lastMoveY;
//计算总共的移动距离
hasMovedDistance+=distance;
//调用原生代码移动蛋壳
self.refs[PLU_IMAGE_KEY].shellUpward(distance);
}
lastMoveY=gestureState.moveY;

lastMoveY

是记录上次移动的距离,

distance

表示当前需要移动的距离,

gestureState.dy

 是

touchMove

方法返回的移动路程.

在原生代码中处理移动

double topMargin=iv_shell.getTop();
topMargin-=args.getDouble(0)*FACTOR;
iv_shell.layout(iv_shell.getLeft(),getIntValue(topMargin),iv_shell.   getRight(),iv_shell.getBottom());

使用

view.layout

方法移动蛋壳的布局.

本人项目中的运行效果:



gif动画录得不太好,导致最后的动画效果有跳跃性,敬请谅解.

完整代码下载