慢牛系列四：好玩的React Native

在上次随笔(系列三)中，我试着用RN实现了一个Demo，感觉很不错，当时遇到的问题这篇文章里基本都解决了，比如导航动画问题，这篇文章里主要介绍RN的动画，学会动画以后，各种小创意都可以实现了^^

下面是我自己做的效果：

1、列表项滑动显示操作按钮

/* @flow */
'use strict';

var React = require('react-native');
var Easing = require('Easing');
var {
TouchableWithoutFeedback,
StyleSheet,
View,
Image,
Text,
Animated,
Dimensions,
InteractionManager
} = React;
var SCREEN_WIDTH = Dimensions.get('window').width;
var Component = React.createClass({
getInitialState: function() {
return {
first:new Animated.Value(0),
second:new Animated.Value(0),
three:new Animated.Value(0)
};
},
reset:function (argument) {
this.state.first.setValue(0);
this.state.second.setValue(0);
this.state.three.setValue(0);
},
getAnimations:function (argument) {
return[
Animated.spring(                          // Base: spring, decay, timing
this.state.first,                 // Animate `bounceValue`
{
toValue: SCREEN_WIDTH-50,                         // Animate to smaller size
friction: 7,
tension:40                      // Bouncier spring
}
),
Animated.decay(                          // Base: spring, decay, timing
this.state.second,                 // Animate `bounceValue`
{
//toValue: SCREEN_WIDTH-50,                         // Animate to smaller size
velocity: 1,
deceleration:0.997               // Bouncier spring
}
),
Animated.timing(                          // Base: spring, decay, timing
this.state.three,                 // Animate `bounceValue`
{
toValue: SCREEN_WIDTH-50,                         // Animate to smaller size
easing: Easing.inOut(Easing.ease),
delay:0                  // Bouncier spring
}
)
];
},
onStagger:function (argument) {
this.reset();
Animated.stagger(150,this.getAnimations()).start();
},
onParallel:function (argument) {
this.reset();
Animated.parallel(this.getAnimations()).start();
},
onSequence:function (argument) {
this.reset();
Animated.sequence(this.getAnimations()).start();
},
onAll:function (argument) {
var me=this;
this.reset();
Animated.sequence([
Animated.stagger(50,me.getAnimations()),
Animated.sequence([
Animated.spring(                          // Base: spring, decay, timing
this.state.first,                 // Animate `bounceValue`
{
toValue: 0,                         // Animate to smaller size
friction: 7,
tension:40                      // Bouncier spring
}
),
Animated.decay(                          // Base: spring, decay, timing
this.state.second,                 // Animate `bounceValue`
{
//toValue: SCREEN_WIDTH-50,                         // Animate to smaller size
velocity: -1,
deceleration:0.997               // Bouncier spring
}
),
Animated.timing(                          // Base: spring, decay, timing
this.state.three,                 // Animate `bounceValue`
{
toValue: 0,                         // Animate to smaller size
easing: Easing.bezier(.13,.93,.79,.07),
delay:0                  // Bouncier spring
}
)
]),
Animated.parallel(me.getAnimations())
]).start();
},
render: function() {
return (
<View style={styles.container}>
<View style={{flex:1}}>
<Animated.View style={[styles.view,{top:50,left:this.state.first}]}><Text>spring</Text></Animated.View>
<Animated.View style={[styles.view,{top:150,left:this.state.second}]}><Text>decay</Text></Animated.View>
<Animated.View style={[styles.view,{top:250,left:this.state.three}]}><Text>timing</Text></Animated.View>
</View>
<View style={{flexDirection:'row',height:80,justifyContent :'center',alignItems: 'center'}}>
<TouchableWithoutFeedback onPress={this.onStagger}>
<View style={styles.btn}><Text>stagger</Text></View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.onParallel}>
<View style={styles.btn}><Text>parallel</Text></View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.onSequence}>
<View style={styles.btn}><Text>sequence</Text></View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.onAll}>
<View style={styles.btn}><Text>组合</Text></View>
</TouchableWithoutFeedback>
</View>
</View>
);
}
});

var styles = StyleSheet.create({
container:{
flex:1
},
view:{
position:'absolute',
backgroundColor:'red',
width:50,
height:50,
justifyContent :'center',
alignItems: 'center',
},
btn:{
width:100,
height:50,
backgroundColor:'red',
justifyContent :'center',
alignItems: 'center',
margin:5
}
});

module.exports = Component;

RN动画示例

三、性能优化

　　主要是在执行动画时，避免执行其他工作量比较大的代码，比如，最好不要一边渲染，一边执行动画，而是先执行动画，等动画执行结束后在渲染，可以setTimeout来延时执行渲染，最好是用官方推荐的做法，利用InteractionManager，下面是代码示例：

componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({renderPlaceholderOnly: false});
});
}

　　InteractionManager.runAfterInteractions是在动画或者操作结束后执行，还有其他两种方法：

requestAnimationFrame(): H5的标准，RN实现了它，下一帧渲染时执行，更好的利用浏览器的刷新频率，避免丢帧。

setImmediate/setTimeout(): 定时执行，有可能影响动画的流畅度。

另外，这个项目里用了MPAndroidChart组件，我对MPAndroidChart做了桥接，有想用的用户可以试试这个项目：
https://github.com/hongyin163/react-native-chart-android
如果有想体验React Native的用户，可以下载慢牛APP的APK体验：

关注慢牛的公众号：发送react，返回apk下载链接，apk大小8M，最好连接WiFi下载。



最后，欢迎园友提出好的想法，评论留名！谢谢！

关于我的兼职创业历程

慢牛系列一：如何抓取股票数据

慢牛系列二：前端技术选择

慢牛系列三：React Native实践