Load React Native Recyclerlistview 上的闪烁问题答案

【问题标题】：Flickering issue on Load React Native RecyclerlistviewLoad React Native Recyclerlistview 上的闪烁问题
【发布时间】：2020-07-24 09:49:40
【问题描述】：

我已从 Flatlist 切换到 Flipkart 的 RecyclerlistView。但是像 onload 和 onscroll 这样的事件存在一些行渲染闪烁问题，这似乎很奇怪。有没有人可以解决这个问题？

代码如下：

           <RecyclerListView
 
                optimizeForInsertDeleteAnimations={true}
                // initialOffset={800}

                initialRenderIndex={0}
                scrollsToTop={false}
                showsVerticalScrollIndicator={false}

                style={{ paddingBottom: 90 }}
                forceNonDeterministicRendering={true}
                layoutProvider={this._layoutProvider}

                dataProvider={this.state.dataProvider}
                extendedState={this.state.dataProvider}

                rowRenderer={this._rowRenderer}

                disableRecycling={true}

                // shouldComponentUpdate={true}
                // shouldComponentUpdate={this.shouldComponentUpdateList()}


                onEndReached={this.onEndReached}
                onEndReachedThreshold={0.1}
                renderFooter={this._renderFooter}
                scrollViewProps={{
                    // contentContainerStyle: { paddingBottom: (140) },
                    // stickyHeaderIndices: [1],
                    refreshControl:
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._handleRefresh()
                            }}
                        />
                }}

            />

【问题讨论】：

标签： reactjs react-native react-native-flatlist recyclerlistview react-flatlist

【解决方案1】：

我遇到了类似的问题。它在我的代码中出现了逻辑错误。我的代码是这样的

const dataProviderMaker = (data) => new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(data)
const [dataProvider, setDataProvider] = useState(dataProviderMaker({}))
const [data, setData] = useState()

const fetchData()=>{
fetch(url,{method:"GET",...})
   .then((res)=>res.json())
   .then((res)=>{
      setData(res)
      setDataProvider(dataProviderMaker(data))
   })
}

useEffect(()=>{
 fetchData()
},[data]}

这段代码的错误在于，当屏幕打开时，fetchData() 函数被调用。更新data。当data 在useEffect 内部发生变化时，会调用fetchData 函数。这导致了循环。并列出使用闪烁。

所以我像这样更新了我的代码

const dataProviderMaker = (data) => new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(data)
const [dataProvider, setDataProvider] = useState(dataProviderMaker({}))
const [data, setData] = useState()

const fetchData()=>{
fetch(url,{method:"GET",...})
   .then((res)=>res.json())
   .then((res)=>{
      setData(res)
      setDataProvider(dataProviderMaker(res))
   })
}

useEffect(()=>{
 fetchData()
},[]}

希望对你有帮助

【讨论】：