react native FlatList內嵌本身的Component不刷新的處理

問題描述：

原先列表裏頭有多個自定義標籤，部分是放到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(
             <Text 
                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>
        )
    }
}
複製代碼