如下,我们可以这样使用ref 以获取控件实例,以实现FlatList的一些滑动效果。但使用ref时,偶现被引用对象为null的情况,当产品上线后,后台的error就突出了!网上的很多文章没说明白,传来传去挺坑的,这里把为null的情况说明白~
首先,一次正常的生命周期内ref的回调会被执行两次。第一次为FlatList被渲染完成时,回调正常的对象引用。第二次回调触发的情况是当控件将要被重新渲染或控件被销毁的时候会回调null值。所以当我们用ref时,如果页面的此元素有state触发更新渲染的情况时,我们需要对其进行非null 判断!
<FlatList ref={function(component){ if (!component) { console.log("yeputi_wk", "------------>ref destroy is null") } else { console.log("yeputi_wk", "------------>ref init is not null") } this._refreshList = component; }.bind(this)} showsVerticalScrollIndicator={false} // 是否显示滚动条 enableEmptySections={true} {...this.props} onScroll={this._onscroll} onScrollEndDrag={(event) => this._onScrollEndDrag(event)} onScrollBeginDrag={(event) => this._onScrollBeginDrag(event)} onMomentumScrollEnd={this._onMomentumScrollEnd} ListHeaderComponent={() => { return this._rendRefreshheader(); }} > </FlatList>
请默默的关注一下呗,后期持续更新ReactNaitve深层次的分享~~