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

来源：互联网发布：鹿晗最新知乎编辑：程序博客网时间：2024/05/23 15:06

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

2、使用方式

控件调用

<StarScore selectIndex={this._selectIndex.bind(this)}/>

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

    //  评分当前选中    _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 (            <View style={{flexDirection: 'row', width: width, height: 20, marginBottom: 6}}>                {this._renderBody()}            </View>        );    }    _renderBody() {        let images = [];        for (var i = 1; i <= this.state.totalScore; i++) {            let currentCount = i;            images.push(                <View key={"i" + i}>                    <TouchableOpacity onPress={(i) => {this._score(currentCount)}}>                        <Image source={require('../Img/star.png')} style={{width: 20, height: 20}}/>                        {this._renderYellowStart(i)}                    </TouchableOpacity>                </View>            );        }        return images;    }    _renderYellowStart(count) {        if (count <= this.state.currentScore) {            return (                <Image source={require('../Img/star_yellow.png')} style={{width: 20, height: 20, position: 'absolute'}}/>            );        }    }    _score(i) {        this.setState({            currentScore: i        });        this.props.selectIndex(i);    }}

0 0