评分控件在原生开发中使用很广泛,android中叫做RatingBar,使用方式极其easy,不会用的可以单独找我私聊。今天的主题是使用reactnative来实现RatingBar的效果。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,Dimensions,Image,TouchableOpacity,TouchableWithoutFeedback
} from 'react-native';
var {width, height} = Dimensions.get('window');
var widthSize;
var heightSize;
var selecteIcon ;
var unselectIcon;
var totalScore;
var currentScore ;
var callBack;
var selected;
export default class RattingView extends Component{
constructor(props) {
super(props);
var containerStyle = this.props.style;
var config = this.props.config;
callBack= this.props.callback;
if(config != undefined){
widthSize = config.widthSize;
heightSize = config.heightSize;
selecteIcon = config.selectIcon;
unselectIcon = config.unselectIcon;
totalScore = config.totalScore;
currentScore = config.currentScore;
selected = config.selected;
}
var selectedStyle = {width:widthSize,height:heightSize,position:"absolute"};
var unselectedStyle = {width:widthSize,height:heightSize};
this.state = {
totalScore: totalScore,
currentScore: currentScore,
containerStyle:containerStyle!=undefined?containerStyle:styles.container,
selectedStyle:selectedStyle,
unselectedStyle:unselectedStyle,
};
}
render() {
var containerStyle = this.state.containerStyle;
var selectedStyle = this.state.selectedStyle;
var unselectedStyle = this.state.unselectedStyle;
this._getScore(callBack,this.state.currentScore);
return (
<View style={containerStyle}>
{this._addScoreIcon(selectedStyle,unselectedStyle)}
</View>
);
}
_addScoreIcon(selectedStyle,unselectedStyle) {
let images = [];
for (var i = 1; i <= this.state.totalScore; i++) {
let currentCount = i;
images.push(
<View key={"i" + i}>
<TouchableWithoutFeedback onPress={(i) => {this._updateScore(currentCount)}}>
<View>
<Image source={{uri:unselectIcon}} style={unselectedStyle}/>
{this._addSelectIcon(i,selectedStyle)}
</View>
</TouchableWithoutFeedback>
</View>
);
}
return images;
}
_addSelectIcon(count,selectedStyle) {
if (count <= this.state.currentScore) {
return (
<Image source={{uri:selecteIcon}} style={selectedStyle}/>
);
}
}
_updateScore(i) {
if(selected){
this.setState({
currentScore: i
});
}
}
_getScore(callback,currentScore){
return callback(currentScore);
}
}
const styles = StyleSheet.create({
container:{
width:width,
height:30,
backgroundColor:"red",
flexDirection: 'row',
marginBottom: 6,
}
});
使用方式如下:
var config = {
selected:true,
totalScore:5,
currentScore:2,
selectIcon:"yellow_start",
unselectIcon :"grey_start",
widthSize:20,
heightSize:20
};
return(
<RattingView config ={config} callback = {(current)=>{console.log("----评分结果的回调--",current);}} ></RattingView>
);
注意:config对象主要配置控件的图案,图案大小,总分数,当前分数,是否可选择。必传! callback是评分结果的回调,必传!