React-Native实现热门标签功能

废话少说，先上效果图

Android原生有很多，react-native写的，貌似没有。贴代码：

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Dimensions,
} from 'react-native';

//定义全局的一些变量
const {width} = Dimensions.get('window');
var cols = 3;
var hMargin = 5; //默认水平距离
var vMargin = 10; //默认垂直距离
var marginLeft = 0;
var marginTop = 0;
var marginRight = 0;
var marginBottom = 0;
var itemWidth = (width - (cols + 3) * hMargin - marginRight - marginLeft) / cols;
var itemHeight = itemWidth / 3;


export class CustumHotTag extends Component {

    static defaultProps = {
        currenSelecttPostion: -1,//重置textView的文本
        title: '',//确定textView的文本
    };

    state: {
        'dataList': Array,
        'title': String,
        'currenSelecttPostion': Number
    }

    constructor(props) {
        super(props);
        let primaryPos = -1;
        if (this.props.hMargin != null) {
            hMargin = this.props.hMargin; //默认水平距离
        }
        if (this.props.vMargin != null) {
            vMargin = this.props.vMargin; //默认垂直距离
        }
        if (this.props.marginLeft != null) {
            marginLeft = this.props.marginLeft;
        }
        if (this.props.marginTop != null) {
            marginTop = this.props.marginTop;
        }

        if (this.props.marginRight != null) {
            marginRight = this.props.marginRight;
        }
        if (this.props.marginBottom != null) {
            marginBottom = this.props.marginBottom;
        }

        if (this.props.primaryPos != null) {
            primaryPos = this.props.primaryPos;
        }
        this.state = {
            dataList: this.props.dataSourse,
            title: this.props.title,
            currenSelecttPostion: primaryPos - 1,
        };
    }

    /**重置数据*/
    _resetAllData() {
        this.setState({currenSelecttPostion: -1});
    }

    render() {
        return (
            <View>
                <View style={{
                    flexDirection: 'row',
                    marginLeft: 10,
                    flexWrap: 'wrap',
                    marginTop: 15,
                    marginBottom: marginBottom
                }}>
                    {this._renderAllBadge()}
                </View>
            </View>
        );
    }

    _renderAllBadge() {
        //定义数组所有的子组件
        var allBadge = [];
        dataSourse = this.props.dataSourse;
        count = dataSourse.length;
        for (var i = 0; i < count; i++) {
            var model = dataSourse[i];
            allBadge.push(
                this._renderItemView(model, i)
            );
        }
        return allBadge;
    }

    _renderItemView(btnText, postion) {

        let rows = Math.ceil(dataSourse.length / cols);
        let vMg = 0;
        if (postion / cols >= (rows - 1)) {
            vMg = 0;
        } else {
            vMg = 12;
        }

        return (this.state.currenSelecttPostion == postion ?
                <TouchableHighlight key={postion} onPress={() => {
                    this._getResult(postion, btnText);
                    this.setState({currenSelecttPostion: postion});
                }} style={{
                    borderRadius: 5,
                    height: itemHeight,
                    marginLeft: hMargin,
                    marginRight: hMargin,
                    marginBottom: vMg
                }}>
                    <View style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: '#398DEE',
                        borderRadius: 5,
                        height: itemHeight
                    }}>
                        <Text style={{textAlign: 'center', fontSize: 14, color: 'white', margin: 10}}>{btnText}</Text>
                    </View>
                </TouchableHighlight> : <TouchableHighlight key={postion} onPress={() => {
                    this._getResult(postion, btnText);
                    this.setState({currenSelecttPostion: postion});
                }} style={{
                    borderRadius: 5,
                    height: itemHeight,
                    marginLeft: hMargin,
                    marginRight: hMargin,
                    marginBottom: vMg
                }}>
                    <View style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: '#FFFFFF',
                        borderRadius: 5,
                        height: itemHeight
                    }}>
                        <Text style={{textAlign: 'center', fontSize: 14, color: 'black', margin: 10}}>{btnText}</Text>
                    </View>
                </TouchableHighlight>
        );
    }

    _getResult(postion, value) {
        if (this.props.getSelectpPostion != null) {
            this.props.getSelectpPostion(postion, value)
        }
    }
}