当我使用 FlatList
内部组件 ScrollView
我看到一个警告:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
前后
FlatList
我使用了很多其他组件,而且我的屏幕很长。我试图用
SafeAreaView
包装内容它对我没有帮助,因为在这种情况下我无法滚动内容。我也尝试使用 ListHeaderComponent={SafeAreaView}
和 ListFooterComponent={SafeAreaView}
在 <FlatList>
.我用:
最佳答案
这是一个使用 FlatList
的 VirutalizedList 支持的容器实现:
import React from 'react';
import { FlatList } from 'react-native';
export default function VirtualizedView(props: any) {
return (
<FlatList
data={[]}
ListEmptyComponent={null}
keyExtractor={() => "dummy"}
renderItem={null}
ListHeaderComponent={() => (
<React.Fragment>{props.children}</React.Fragment>
)}
/>
);
}
用法:
<VirtualizedView>
<Text>Anything goes here, even FlatList works good</Text>
<View style={{minHeight: 480}}> // leave enough space for better user experience
<FlatList
data={data}
keyExtractor={keyExtractor}
renderItem={({item}) => <Item data={item} />}
onRefresh={refetch}
refreshing={loading}
onEndReached={concatData}
/>
</View>
</VirtualizedView>
当您的屏幕太长时,这将显示滚动条,并删除讨厌的警告消息,性能将毫无问题地得到保存。
关于react-native - 如何修复此警告 : VirtualizedLists should never be nested inside plain ScrollViews with the same orientation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59359129/