ReactNative系列之十四评分效果的实现

1、写一个评星级的组件，在网上其它地方也没找到所以分享一下，效果图

2、使用方式

控件调用

星级选择后，设置属性方法，在主页在设置星级值

    //  评分当前选中
    _selectIndex(count) {
        this.state.currentScore = count;
    }

3、完整代码：

/**
 * Created by QQ756312633 on 2017/5/12.
 * http://blog.csdn.net/yeputi1015/article/
 */
'use strict'

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    WebView,
    Alert,
    ListView,
    ScrollView,
    InteractionManager,
    TextInput,
    TouchableOpacity,
    Image,
    Dimensions
} from 'react-native';

var {width, height} = Dimensions.get('window');

export default class StarScore extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            totalScore: 5, // 总分值
            currentScore: 3, // 分值
        };
    }

    render() {
        return (
            
                {this._renderBody()}
            
        );
    }

    _renderBody() {
        let images = [];
        for (var i = 1; i <= this.state.totalScore; i++) {
            let currentCount = i;
            images.push(
                
                     {this._score(currentCount)}}>
                        
                        {this._renderYellowStart(i)}
                    
                
            );
        }
        return images;
    }

    _renderYellowStart(count) {
        if (count <= this.state.currentScore) {
            return (
                
            );
        }
    }

    _score(i) {
        this.setState({
            currentScore: i
        });
        this.props.selectIndex(i);
    }

}