升级到 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我应该使用的另一个是什么，为什么现在建议不要那样使用？
React-Native 另一个 VirtualizedList 支持的容器
IT技术
javascript
reactjs
react-native
2021-04-07 16:34:03
6个回答
如果有人仍在寻找对@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嵌套在 a 中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}
/>
);
}
最好的方法是禁用该警告，因为有时Flatlist需要在ScrollView.
更新 RN V0.63 以上
YellowBox 现在已更改并替换为 LogBox
功能性
import React, { useEffect } from 'react';
import { LogBox } from 'react-native';
useEffect(() => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])
基于等级
import React from 'react';
import { LogBox } from 'react-native';
componentDidMount() {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}
更新 RN V0.63 下面
功能性
import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';
useEffect(() => {
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, [])
基于等级
import React from 'react';
import { YellowBox } from 'react-native';
componentDidMount() {
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}
出现警告是因为ScrollView和FlatList共享相同的逻辑，如果FlatList在里面运行ScrollView，它是重复的
顺便说一句SafeAreaView对我不起作用，唯一的解决方法是
<ScrollView>
{data.map((item, index) => {
...your code
}}
</ScrollView>
错误消失
查看文档中的示例，我已将容器从以下位置更改：
<ScrollView>
<FlatList ... />
</ScrollView>
到：
<SafeAreaView style={{flex: 1}}>
<FlatList ... />
</SafeAreaView>
所有这些警告都消失了。