ReactNative进阶之评分控件的封装

来源：互联网发布：可米酷漫画软件编辑：程序博客网时间：2024/06/05 18:16

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

阅读全文

0 0