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

Question

升级到 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 是什么，为什么现在建议不要那样使用？

原文由 David Schilling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果有人仍在寻找对@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

希望它可以帮助某人。 :)

原文由 Afraz Hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以防万一这对某人有帮助，这就是我修复案例中错误的方法。

我有一个 FlatList 嵌套在 ScrollView ：

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

我摆脱了 ScrollView 通过使用 FlatList 呈现我需要的一切，这摆脱了警告：

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

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

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

原文由 Edward D’Souza 发布，翻译遵循 CC BY-SA 4.0 许可协议