ReactNative系列之二十八ref为null的情况

最新推荐文章于 2025-01-13 17:25:48 发布

原创最新推荐文章于 2025-01-13 17:25:48 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

ReactNative跨平台专栏收录该内容

73 篇文章

订阅专栏

本文探讨了在React Native中使用FlatList组件时遇到的ref引用为null的问题，并提供了详细的解决方案，包括如何正确地进行非null判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下，我们可以这样使用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深层次的分享~~