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

javascript reactjs react-native

2022-08-30 02:20:44

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

答案 1

如果有人仍然在寻找@Ponleu和席林@David在这里描述的问题的建议（关于高于FlatList的内容），那么这就是我采取的方法：

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

您可以在此处阅读更多相关信息：https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

希望它能帮助某人。:)

答案 2

以防万一这有助于某人，这就是我如何修复我的情况下的错误。

我有一个嵌套在里面：FlatListScrollView

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>
    );
}

我通过使用来渲染我需要的一切来摆脱了，这摆脱了警告：ScrollViewFlatList

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}
        />
    );
}