web-dev-qa-db-ja.com

React-Native別のVirtualizedList-backedコンテナー

反応ネイティブ0.61にアップグレードした後、次のような警告がたくさん表示されます。

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

他のVirtualizedList-backed containerそれを使用する必要があります。なぜ今はそのように使用しないように勧められているのですか？

javascriptreactjsreact-native
36
David Schilling

私の意見では、FlatListの代わりにマップを使用できます。しかし、私の場合、大きなリストを表示したくありません。 FlatListを使用しないと、パフォーマンスの問題が発生する可能性があります。だから私はこれを使って警告を抑制しました https://github.com/GeekyAnts/NativeBase/issues/2947#issuecomment-549210509

0
tvankith

ScrollViewとFlatListは同じロジックを共有するため、警告が表示されます。FlatListがScrollView内で実行されると、重複します

ちなみにSafeAreaViewは機能しませんが、解決する唯一の方法は

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

エラーが消える

0
Tuan Dat Tran

ListHeaderComponentやListFooterComponentなど、これを解決する方法をいくつか試しましたが、すべてが私には適していませんでした。

達成したかったレイアウトはこのようなもので、一度にスクロールしたかったのです。

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

まず this の問題とコメントに感謝します。たくさんのアイデアを与えてくれました。

Flatlistの上のListHeaderComponentの場所を考えていましたが、Flatlistの方向が列だったので、配置したいヘッダーはFlatlistの左側にありました:(

次に、VirtualizedList-backedを試してみました。すべてのコンポーネントをVirtualizedListにパックしようとしたところ、renderItemsはインデックスを提供し、条件付きでコンポーネントをrenderItemsに渡すことができました。

Flatlistでこれを処理できたかもしれませんが、まだ試していません。
最終的には次のようになります。

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />

もちろん画面全体をスクロールすることもできます。

0
Takahiro Nishino