ReactNative进阶之评分控件的封装

评分控件在原生开发中使用很广泛，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是评分结果的回调，必传！