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使用するべき他のものは何ですか？なぜ今それをそのように使用しないように勧められているのですか？

@Ponleuと@David Schillingがここで説明した問題（FlatListの上にあるコンテンツに関して）に対する提案を誰かがまだ探しているなら、これが私が取ったアプローチです。

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

詳細については、https：//facebook.github.io/react-native/docs/flatlist#listheadercomponentをご覧ください。

うまくいけば、それは誰かを助けます。:)

これが誰かを助けるために、これは私が私の場合にエラーを修正した方法です。

私はFlatList入れ子にされていましたScrollView：

render() {
    return (
        <ScrollView>
            <h1>{'My Title'}</h1>
            <FlatList
                data={this.state.myData}
                renderItem={({ item }) => {
                    return <p>{item.name}</p>;
                }}
            />
            {this.state.loading && <h2>{'Loading...'}</h2>}
        </ScrollView>
    );
}

そして、私は必要なすべてのものをレンダリングするためにScrollViewを使用してFlatListを取り除き、警告を取り除きました：

render() {
    const getHeader = () => {
        return <h1>{'My Title'}</h1>;
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return <h2>{'Loading...'}</h2>;
    };

    return (
        <FlatList
            data={this.state.myData}
            renderItem={({ item }) => {
                return <p>{item.name}</p>;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}

私がコンテナを変更したドキュメントの例を見てください：

<ScrollView>
    <FlatList ... />
</ScrollView>

に：

<SafeAreaView style={{flex: 1}}>
    <FlatList ... />
</SafeAreaView>

そしてそれらの警告はすべて消えた。

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

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

ちなみにSafeAreaView私にはうまくいきません、解決する唯一の方法は

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

エラーが消える

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

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

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

まず、この問題とコメントに感謝したいと思います。

私は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 />  

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

この問題は、<FlatList />内部<ScrollView>を同じ向きで使用しているときに発生します。

これを修正するには、単に "horizo​​ntal"をFlatListに追加します。

<ScrollView>
    <FlatList **horizontal** ... />
</ScrollView>

注意：FlatListは水平にレンダリングされます