0.5.8 • Published 7 years ago
react-native-counting v0.5.8
React Native Counting
Component implementation for Dynamic digital effect.
用法
- npm install react-native-counting --save
- react-native link react-native-counting
注意
Android暂时无法使用border相关的属性
属性&&方法
- text:String 默认显示的文字
- fontProperty:object 传入一个对象
- fontSize:字体大小(Int)
- textAlignment:center || left ||right 对齐方式(string)
- boldSystem:是否加粗(bool)
- method:动画方式(String) EaseInOut || EaseIn || EaseOut || Linear
- textColor 文字底色(Colo)
- onFinish 完成回调执行的方法(func)
Counting:
import React, { Component } from 'react';
import Counting from 'react-native-counting';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
export default class nodeforum extends Component {
constructor(props){
super(props)
this.state = {
finshded:false
}
}
_onPressButton(){
this.counting.countingStart(0,5200.10,3000);
this.setState({
finshded:false
})
}
_finish(){
this.setState({
finshded:true
})
}
render() {
const fontProperty = {
fontSize:35,
textAlignment:'center',
boldSystem:false,
method:'Linear'
}
const { finshded } = this.state;
return (
<View style={styles.container}>
<Counting style={styles.counting} text="0.00" ref={(ref) => this.counting = ref} fontProperty={fontProperty} textColor="white" onFinish={this._finish.bind(this)}/>
<TouchableOpacity onPress={this._onPressButton.bind(this)} style={styles.button}>
<Text>click Me</Text>
</TouchableOpacity>
<Text style={styles.isfinish}>{finshded?"finished":"dnf"}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
button:{
marginTop:20,
},
counting:{
marginTop:60,
backgroundColor:'black',
width:180,
height:150,
borderRadius:20,
},
isfinish:{
marginTop:20,
color:'red'
}
});
AppRegistry.registerComponent('nodeforum', () => nodeforum);
In this example, Image
component will be blurred, a BlurView
content will stay untouched.
Questions?
Feel free to contact me By qq(452359549)
thanks
0.5.8
7 years ago
0.5.7
7 years ago
0.5.5
7 years ago
0.5.1
7 years ago
0.5.0
7 years ago
0.2.4
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago