React-Native另一个由VirtualizedList支持的容器

升级到react-native 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>

所有这些警告都消失了。

我认为我可以使用map代替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>相同方向的内部。

要解决此问题，只需在您的FlatList中添加“水平”即可：

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

注意：您的FlatList将水平呈现