RN动画制作之系列动画
import React, { Component } from 'react';import {
AppRegistry,
Button,
View,
Animated,
StyleSheet
} from 'react-native';
export default class myreact extends Component {
constructor(props) {
super(props);
this.state = {
a:new Animated.Value(0),
b:new Animated.Value(0),
c:new Animated.Value(0),
d:new Animated.Value(0),
e:new Animated.Value(0)
}
};
render() {
return (
<View style={{flex:1}}>
<Animated.View style={styles.contianer}>
<Animated.Text style={}>鱼</Animated.Text>
<Animated.Text style={}>C</Animated.Text>
<Animated.Text style={}>工</Animated.Text>
<Animated.Text style={}>作</Animated.Text>
<Animated.Text style={}>室</Animated.Text>
</Animated.View>
<Button onPress={()=>{
this.setState({
a:this.state.a,b:this.state.b,
c:this.state.c,d:this.state.d,
e:this.state.e
})
Animated.sequence([
Animated.timing(this.state.a, {
toValue:1,
duration:1000
}),
Animated.timing(this.state.b, {
toValue:1,
duration:1000
}),
Animated.timing(this.state.c, {
toValue:1,
duration:1000
}),
Animated.timing(this.state.d, {
toValue:1,
duration:1000
}),
Animated.timing(this.state.e, {
toValue:1,
duration:1000
})
]).start();
}}
title="press me"
color="#841584"
/>
</View>
);
}
}
var styles=StyleSheet.create({
contianer:{
flex:1,backgroundColor: 'lightblue',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center' ,
},
text:{
fontSize: 50,
color: 'green',
fontFamily: '微软雅黑'
}
})
AppRegistry.registerComponent('myreact', () => myreact);
这就是系列动画，效果图为：
做手机app是非常麻烦的，因为只是个新手入门系列，这个系列教程就讲到这里，里面有好多错误希望大家指出。还有其他的一些控件，比如listview都是相当好用，还有跨域获取其他网站的数据fetch，手机数据库syncstorage等都是简单好用，各位都可以自己以后深入的研究，有想继续学的鱼油可以去https://reactnative.cn/docs/0.47/getting-started.html这个中文官方网站，这是我找到的最好的学react native的官网。因为这是去年脸谱网站才发明出来的新技术，有些技术还不是太成熟，难度方面我觉得也不次于用java做android，而且还必须要联网才行，对于中国大部分地区还没有上网条件来说还不会太普及这项技术，主流还是应该java。也许将来我会在java板块做个用java做android手机app的教程，话说还是纯原生的比较好{:10_323:}
页:
[1]