React-Native实现热门标签功能

最新推荐文章于 2026-05-24 10:28:09 发布

原创

最新推荐文章于 2026-05-24 10:28:09 发布 · 置顶 · 1.4k 阅读

标签

#react-native #自定义控件 #热门新闻标签 #自动换行textview #热门标签

收录于

废话少说，先上效果图

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,
        'currenSelecttPosti