问题描述:
原先列表里头有多个自定义标签,部分是放到FlatList所在类里头的,内部class, 当列表刷新,元素数量变化时,没有影响。
但其中有一个自定义组件包含state 最后造成,元素个数变化后,异步先按顺序获取这个组件旧的虚拟Dom,造成新的Flatlist元素渲染时,对应包含的自定义组件没有重新创建而是用旧的遍历返回对应的旧虚拟节点。
最后的实现方式如下:也就是实现显示'更多'的效果
因为这样之后没有完整的state 而不会有异步渲染子节点,而是跟随FlatList同步生成渲染 keyExtractor={(item, index) => item.id}
之前一直是用index 做键来关联,后面用元素的id唯一索引就ok 了老了么......
import React, { Component } from 'react';
import {
} 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(
onLayout={(e)=>{
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?<Text style={{color:'#56C2F2',fontSize:14*sz, fontFamily:'OpenSans',lineHeight:22.4*sz,position:'absolute',right:0}}>more</Text>:null}
</Text>
转载于:https://juejin.im/post/5cf59df96fb9a07eee5eb97e
问题描述:原先列表里头有多个自定义标签,部分是放到FlatList所在类里头的,内部class, 当列表刷新,元素数量变化时,没有影响。但其中有一个自定义组件包含state 最后造成,元素个数变化后,异步先按顺序获取这个组件旧的虚拟Dom,造成新的Flatlist元素渲染时,对应包含的自定义组件没有重新创建而是用旧的遍历返回对应的旧虚拟节点。最后的实现方式如下:也就是实现显示'更多'的效果...
一、属性方法
(1) onRefresh function 在视图开始刷新的时候调用
(2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中
(3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种
(4) enabled bool android平台适用 用来设置下拉刷新功能是否可用
(5) progressBackgroundColor ColorPropType 设置加载进度指示器的背景颜色
FlatList组件用于显示一个垂直的滚动列表,其中的元素之间结构类似仅数据不同。
FlatList更适用于长列表数据,且元素个数可以增删。和ScrollView不同的是它不立刻渲染所有元素而是优先渲染界面上可见的元素,还有就是ScrollView只是一个滚动视图容器,其中可以嵌套多个不同类型的标签元素。
FlatList组件必须设置的两个属性:data
跟 renderItem
不知道是React Native的第几篇了
今天做评价功能意外发现页面不好好更新,state里的数据已经更新了但是页面并没有更新到最新的状态
找了好几个办法都没什么用,最后https://www.cnblogs.com/yang-shun/p/8818715.html这个办法有效
但是不知道是怎么原理,还没搜到
子组件的代码,其构造函数内初始化了自己全新的state,数据是props传入的data,在render函数内通过this.state取数据,这样当父组件调用setState之后,而子组件state里面的数据并没有发生变化,这就导致子组件并没有去调用render重新渲染页面,这种情况即使是调用forceUpdate方法也没用。
现在的改法是在props...
<FlatList keyExtractor={ () => Math.random(2) }
data={this.state.goodList}
renderItem={this.renderItem}
ItemSeparatorComponent={this.separatorCom...
给flatlist添加属性:handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems)}
转载于:https://www.cnblogs.com/yang-shun/p/8818715.html
核心思路就是往数据源里面 给每条数据加一个选中状态.
如图在网络请求完成之后,给每条数据添加一个select的状态:
data.l
ist.forEach(item => item.select = false);
fetchL
ist(page) {
if (page == 1 && !this.state.r...
需求:FlatList使Footer一直在最底部。当内容不满的时候,footer在FlatList的最底部,当内容满了的时候,footer可以随FlatList滚动。
首先,要分清楚两个概念,FlatList的大小和FlatList的ContentSize的大小,FlatList的大小一般是固定的,而FlatList的ContentSize会随着内容而改变。FlatList可以理解为是Conte...
在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代,可以看到,特别是0.50之后,React Native的组件库在不断地壮大,React Native也正在越来越稳定。
随着版本的升级,React Native引进了一些新的组件中,如FlatList、SectionList等具有更高性能的列表组件,也有与时俱进的用于适配全屏幕的SafeAreaView组件,...
今天在进行react native 新版本学习的时候,发现一个问题,和之前使用listview加载数据时一样,进入加载数据的页面,数据无显示,但是用手碰一下或者滑动一下数据就加载出来了,发现有一个属性,之前在listview中可以使用的,在flatlist中依然可以使用,书友翻看我的简书文章会发现,之前我写过www.jianshu.com/writer#/not…
image.png
就是图中标记...