Проблема с мерцанием при загрузке React Native Recyclerlistview

Question

Я переключился с Flatlist на RecyclerlistView от Flipkart. Но при таких событиях, как 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()
                            }}
                        />
                }}

            />

Answer 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 изменить внутри 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()
},[]}

Надеюсь, это поможет тебе