博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react native FlatList内嵌自己的Component不刷新的处理
阅读量:6266 次
发布时间:2019-06-22

本文共 1799 字,大约阅读时间需要 5 分钟。

问题描述:

原先列表里头有多个自定义标签,部分是放到FlatList所在类里头的,内部class, 当列表刷新,元素数量变化时,没有影响。

但其中有一个自定义组件包含state 最后造成,元素个数变化后,异步先按顺序获取这个组件旧的虚拟Dom,造成新的Flatlist元素渲染时,对应包含的自定义组件没有重新创建而是用旧的遍历返回对应的旧虚拟节点。

最后的实现方式如下:也就是实现显示'更多'的效果

因为这样之后没有完整的state 而不会有异步渲染子节点,而是跟随FlatList同步生成渲染 keyExtractor={(item, index) => item.id}

之前一直是用index 做键来关联,后面用元素的id唯一索引就ok 了老了么......

import React, { Component } from 'react';import {    Text} from 'react-native';import {size} from "../util/style";const sz = size.width/375;export default class HaveMoreText extends Component {    constructor(props){        super(props)        this.state = {            content:this.props.content,            showMore:false        }    }    render(){        return(             
{ let layout = e.nativeEvent.layout; // console.log(layout.height) // console.log(layout) // console.log(this.refs.text) if(layout.height>3*22.4*sz){//行高是20然后把text的高度设置为60就能保证行数控制在3行 // this.refs.text.props.children[0] let newContent = this.state.content.substring(0,parseInt(this.state.content.length*3*22.4*sz/layout.height)-10) this.setState({showMore:true,content:newContent+'...'}) // this.refs.text.setNativeProps({ // numberOfLines:3 //         }); } }} ref='text' //numberOfLines={3} style={
{ color:'#767A7F',fontSize:14*sz, fontFamily:'OpenSans',lineHeight:22.4*sz }}> { this.state.content } {this.state.showMore?
more
:null}
) }}复制代码

转载于:https://juejin.im/post/5cf59df96fb9a07eee5eb97e

你可能感兴趣的文章
Android程序开发初级教程(一) 开始 Hello Android
查看>>
使用Gradle打RPM包
查看>>
“我意识到”的意义
查看>>
淘宝天猫上新辅助工具-新品填表
查看>>
再学 GDI+[43]: 文本输出 - 获取已安装的字体列表
查看>>
nginx反向代理
查看>>
操作系统真实的虚拟内存是什么样的(一)
查看>>
hadoop、hbase、zookeeper集群搭建
查看>>
python中一切皆对象------类的基础(五)
查看>>
modprobe
查看>>
android中用ExpandableListView实现三级扩展列表
查看>>
%Error opening tftp://255.255.255.255/cisconet.cfg
查看>>
java读取excel、txt 文件内容,传到、显示到另一个页面的文本框里面。
查看>>
《从零开始学Swift》学习笔记(Day 51)——扩展构造函数
查看>>
python多线程队列安全
查看>>
[汇编语言学习笔记][第四章第一个程序的编写]
查看>>
android 打开各种文件(setDataAndType)转:
查看>>
补交:最最原始的第一次作业(当时没有选上课,所以不知道)
查看>>
Vue实例初始化的选项配置对象详解
查看>>
PLM产品技术的发展趋势 来源:e-works 作者:清软英泰 党伟升 罗先海 耿坤瑛
查看>>