React Native 实现动态计算文本高度_react native 动态高度-程序员宅基地

1.需求

       在实际手机开发中经常遇到,需要动态计算文本的高度,尤其在文本列表中,当然你可以实现动态计算ListView 的cell的高度,请参考react native 实现动态高度Listview 和图文混排,但是现在我们的目标是通过普通的组件View 和 text 实现动态计算文本,怎么实现呢?

2.实现思路

  1.通过计算每个Item的title 和 text 的高度, 比较最大的高度,通过设置item的state改变自身的高度

   2.通过Item的回调函数,将每个item 的高度,传给 Item所在的组件
   3.item的父组件通过回调过来的Item的高度,通过过滤,计算所有Item的总高度
   4.item的父组件 改变自身state, 设置自身高度

3.代码实现

  item.js

export default class Item extends Component {
    static defaultProps =  {
        title:'' ,
        text:'' ,
        itemCount:0,
        titleStyle:View.propTypes.style,
        textStyle:View.propTypes.style,
        viewStyle:View.propTypes.style,
        callBackItemHeight:PropTypes.func

    }


    static propTypes ={
        title:PropTypes.string,
        text:PropTypes.string,
        itemCount:PropTypes.number,
        viewStyle:View.propTypes.style,
        titleStyle:Text.propTypes.style,
        textStyle:Text.propTypes.style,
        callBackItemHeight:PropTypes.func

    }
    constructor(props) {
        super(props);

        this.titleHeight=0;
        this.textHeight=0;
        this.state={
            itemHeight:40
        }

    }
    _titleLayout(event) {
        this.titleHeight=event.nativeEvent.layout.height
       // this.getItemHeight(this.titleHeight,this.textHeight)

    }
    _textLayout(event) {

        this.textHeight=event.nativeEvent.layout.height
        this.getItemHeight(this.titleHeight,this.textHeight)
    }

    getItemHeight(titleHeight,textHeight){

        let maxHeight=titleHeight>textHeight?titleHeight:textHeight
        this.setState({
            itemHeight:maxHeight
        })
        if(this.props.callBackItemHeight){
            this.props.callBackItemHeight(maxHeight)
        }
        this.refs.title.setNativeProps({
            style:{
                top:(this.state.itemHeight-titleHeight)/2,
                left:16,
                width:134,
                backgroundColor:'transparent',
                height:titleHeight,
                justifyContent:'center'

            }
        });
        this.refs.text.setNativeProps({
            style:{
                left:10,
                top:(this.state.itemHeight-textHeight)/2,
                width:Globle.window.width-170,
                height:textHeight,
                backgroundColor:'transparent',
                justifyContent:'center'
            }
        });
        this.refs.seperate.setNativeProps({
            style:{
               position:'absolute',left:16,width:Globle.window.width-16,height:1,backgroundColor:'#1a1a1a',top:this.state.itemHeight-1
            }
        })
    }

    render (){

        let container={height:this.state.itemHeight}
        return(
            <View style={[styles.item,container]}>
                <View ref="title">
                <Text   style={
      {color:'#666666'}} onLayout={this._titleLayout.bind(this)}>
                    {this.props.title}
                </Text>
                    </View>

                <View ref="text">
                <Text   style={
      {color:'#000000'}} onLayout={this._textLayout.bind(this)}>
                    {this.props.text}
                </Text>
                </View>
                <View ref="seperate"></View>
            </View>
        )


    }
}

const styles=StyleSheet.create({

    item:{
        flexDirection:'row'
    }

})

Index.android.js
var heightArray=[]
var hh=0
export default class test extends Component {

     constructor(props) {
        super(props)
        this.state={
            dataSource:[],
            totalHeight:0
        }


    }
     componentWillMount(){
         this.setState({
             dataSource:[
                 {title: '范冰冰', text:"近日,第11届亚洲电影大奖在香港落幕,《我不是潘金莲》获得包括最佳电影、最佳摄影在内的三项大奖,范冰冰凭借该片拿下最佳女主角奖。范冰冰在领奖台上表示,这是送给冯小刚导演的生日礼物,“你是我伯乐,我是你福将”"},
                 {title: '陈数',text:"2009年,凭借《倾城之恋》入围韩国首尔电视节,唯一一位亚洲女演员获 韩国首尔电视节最佳女演员提名。2011年,获得第十七届上海电视节白玉兰奖“最佳女演员”,2011年第六届华鼎奖“最佳女主角”,2012年凭借《铁梨花》荣获“金鹰奖“观众喜爱女演员”奖项"},
                 {title: '胡歌', text:"2005年1月24日,主演的古装仙侠剧《仙剑奇侠传》播出,胡歌饰演豪爽深情的李逍遥,并演唱两首插曲《六月的雨》和《逍遥叹》 "},
                 {title: '何塞·保罗·贝塞拉·马希尔·儒尼奥尔(José Paulo Bezerra Maciel Júnior),简称保利尼奥[1]  ,1988年7月25日出生于巴西圣保罗,巴西足球运动员。司职中前卫、后腰等。现效力于中国广州恒大淘宝足球俱乐部', text:"暴力鸟"}
             ]
         })

     }
     renderItem(data,i){

        return(<Item key={i}
                     title={data.title}
                     text={data.text}
                     itemCount={this.state.dataSource.length}
                     callBackItemHeight={(h)=>{
                     console.log("h===>"+h)
                       heightArray.push(h)
                       hh+=h

                   heightArray.sort().reverse()
                   for(let i=0;i<this.state.dataSource.length;i++){
                   hh+=heightArray[i]
                   }
                      this.setState({
                      totalHeight:hh
                      })
                      }
                     }

            />)
    }

  render() {
    return (
      <View >
          <View style={
      {backgroundColor:'white',top:0,height:this.state.totalHeight}}>
              {this.state.dataSource.map((data,i)=>this.renderItem(data,i))}
          </View>
      </View>
    );
  }
}

4.代码实现效果





版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lcg910978041/article/details/65635538

智能推荐

在类Unix平台实现TCP客户端-程序员宅基地

文章浏览阅读1k次,点赞8次,收藏16次。我们这个TCP客户端将从命令行接收两个参数,一个是IP地址或域名,另一个是端口,并尝试连接在这个IP地址的TCP服务端。

彩虹外链网盘界面UI美化版超级简洁好看-程序员宅基地

文章浏览阅读114次。彩虹外链网盘,是一款PHP网盘与外链分享程序,支持所有格式文件的上传,可以生成文件外链、图片外链、音乐视频外链,生成外链同时自动生成相应的UBB代码和HTML代码,还可支持文本、图片、音乐、视频在线预览,这不仅仅是一个网盘,更是一个图床亦或是音乐在线试听网站。适合小文件快速共享,文件可以设置访问密码,doc,图片等文件可以预览,音频可以在线播放,也适合做图床,支持在线下载,美化前台UI,运行天数和友链在后台统计代码修改。访问后台/admin 默认账号密码admin/123456。

vue项目启动不显示Network,及Network无法访问的问题_vue network网址访问不了-程序员宅基地

文章浏览阅读4k次,点赞2次,收藏15次。首先找到build文件夹下webpack.dev.conf.js文件,修改compilationSuccessInfo里边的messages属性。在vue.config.js(或者配置config了的,就在config下的index.js )文件下设置。最后在package.json文件中 scripts 下的 dev 或者 serve 后面加上。以上设置可以显示Network 调试地址,但是无法访问,还需设置一下。回车后会出现一串信息,复制IPV4 地址即可。地址 ,获取IPV4 地址方法,_vue network网址访问不了

C++cin.getline和std::getline的用法和区别-程序员宅基地

文章浏览阅读632次。从文件或控制台读入数据。都可以一次性读入多个字符,即读一串字符。cin.getline 是类函数。是基本输入流的函数。标准输入流,是一个类对象。也可以是。std::getline 是标准函数,使用时需要引入头文件 。cin.getline读入的数据一般放在字符数组中,std::getline读入的数据一般放在string对象中。由于cin.getline函数读入的数据放在字符数组中,所以要给出读入字符的(最大)数量。std::getline函数需要给出读入的文件流对象。 : 指向要存储字符到的字符数组的_std::getline

倍福--EL2521控制步进_倍福el2521接线图-程序员宅基地

文章浏览阅读944次。使用了EL2521控制步进电机。对于脉冲型步进或伺服驱动器,可使用EL2521模块控制操作流程1.1. EL2521简介1.1.1. 外观和接线EL2521 xxxx输出端子改变二进制信号的频率并输出(与K总线电气隔离)。频率由来自自动化设备的16位值预设。EtherCAT端子的信号状态由发光二极管指示。LED与输出同步,每个LED显示一个活动输出。1.1.2. EL2521信号类型EL2521模块的后缀有-0000,-0024,-0025,-0124几种,各种类型的接线是不同的,这点要稍_倍福el2521接线图

转载-mac下完全卸载Node.js(亲测可用)_mac 卸载 node.js-程序员宅基地

文章浏览阅读46次。【代码】转载-mac下完全卸载Node.js(亲测可用)_mac 卸载 node.js

随便推点

变色龙哈希函数 Chameleon Hash 可变型区块链_变色龙哈希改写区块-程序员宅基地

文章浏览阅读1.3w次,点赞7次,收藏42次。哈希函数 Hash:众所周知,区块链有着极其优秀的安全性就是因为其充分使用了哈希函数。哈希简单用一句话来讲,就是:将任意长度输入的字串可转换成一个固定长度的字串,通过原始字串可以很容易地算出转换后的字串,通过转换后的字串很难还原出原始字串。哈希函数特征:1. 对于任意m作为输入,得到输出的结果,很难找到另一个输入m' (m'不等于m),使得m'的Hash结果也为同样的输出_变色龙哈希改写区块

【LSTM回归预测】基于蜣螂算法优化长短时记忆DBO-LSTM风电数据预测(含前后对比)附Matlab代码-程序员宅基地

文章浏览阅读796次,点赞13次,收藏17次。基于蜣螂算法优化长短时记忆(DBO-LSTM)模型的风电数据预测是一个备受关注的研究领域。风电是一种清洁能源,其预测对于能源规划和市场运营具有重要意义。本文旨在通过对比蜣螂算法优化前后的长短时记忆(DBO-LSTM)模型在风电数据预测中的表现,探讨蜣螂算法在优化风电数据预测模型中的有效性。首先,长短时记忆(LSTM)是一种适用于时间序列数据的深度学习模型,它能够捕捉数据中的长期依赖关系,因此在风电数据预测中具有较好的表现。

小米便签data包源码解读_小米便签开源代码注释-程序员宅基地

文章浏览阅读1.8k次,点赞36次,收藏53次。对于小米便签data包源码的一些解读,可能不是很准确_小米便签开源代码注释

KE分析之slub_debug功能使用记录_photonicmodulat-程序员宅基地

文章浏览阅读2.1k次。1. 前记前段时间遇到一个问题,具有一定的代表性,特此记录,后续遇到类似问题时,可以参考这个方向2. 问题说明此问题为低概率煲机测试类问题,概率较低,需要长时间的运行才可以触发到,排查起来比较困难;2.1 测试方法设置机器为自动化休眠唤醒测试,时间周期为1分钟;usb 口有连接u盘,唤醒后会自动播放u盘内歌曲;无其他特别步骤测试时通过串口打印debug信息,另外打开系统中集成的debug功能,即收集logcat + kernel log信息,在遇到anr\je\ne\ke\hwt时会将现场_photonicmodulat

Spring + spring Mvc No Servlet Set 错误_no servletcontext set-程序员宅基地

文章浏览阅读60次。在使用注解开发,SpringMvc配置类的情况下开启@EnableWebMvc,如果在springConfig类中的@Component扫描Bean对象再次扫描到spring和springMvc的配置Bean对象就会出现No Servlet Set错误。_no servletcontext set

初学cesium时的一些笔记,过于潦草看看就好_cesium pbr 3200-程序员宅基地

文章浏览阅读840次。Cesium ion(假如要用自己的数据则需要上传数据)Cesium依赖:基于HTML5标准,无插件,跨平台;无法单独运行,依赖于浏览器(Cesium Lab基于Electron架构)浏览器基于HTTP协议,所以必须有HTTP ServerCesium功能介绍:定义影像矢量模型:{1使用3d tiles格式模式加载各种不同的3d数据,包含倾斜摄影模型,三位建筑物,CAD和BIM的外..._cesium pbr 3200

推荐文章

热门文章

相关标签