时间戳

首页 > 解决方案 > Load React Native Recyclerlistview 上的闪烁问题

reactjs - Load React Native Recyclerlistview 上的闪烁问题

问题描述

我已经从 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()
                            }}
                        />
                }}

            />

标签： reactjsreact-nativereact-native-flatlistrecyclerlistviewreact-flatlist

解决方案

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

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()
},[]}

希望它可以帮助你

推荐阅读