在主屏幕中,我有 3 个 FlatList 和一些其他视图的“其他数据”,
那么我应该将它包装在 ScrollView 中,这样我就可以滚动查看其他数据等等,
但是当我用scrollView包装FlatList时我收到了这个警告
VirtualizedLists 永远不应该嵌套在普通的 ScrollViews 中
相同的方向 - 使用另一个 VirtualizedList 支持的容器
反而。
那么如何在不为 FlatList 创建页眉/页脚组件的情况下解决这个问题呢?
Demo https://snack.expo.io/UBFLbsvzM“注意:我在展会上没有收到警告,也没有使用它,这只是一个观看现场演示的示例”
这里是代码片段
const HomeScreen = () => {
const renderServices = ({item, index}) => {
return (
<View style={styles.itemContainer}>
<View style={styles.serviceImgContainer}>
<Image
style={styles.serviceImg}
source={{
uri:
'https://cdn1.iconfinder.com/data/icons/appliance-1/100/dryer-03-512.png',
}}
/>
</View>
<Text>{item.name}</Text>
</View>
);
};
return (
<View style={styles.container}>
<ScrollView style={{flex: 1}}>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>
Booking Now!
</Text>
<View style={styles.imgHeaderContainer} />
</View>
{/* Services */}
<View style={styles.servicesContainer}>
<View style={styles.servicesHeader}>
<Text style={styles.headerTitle}>Services</Text>
<TouchableOpacity>
<Text style={styles.headerTitle}>more</Text>
</TouchableOpacity>
</View>
<FlatList
scrollEnabled={false}
data={[
{id: 0, name: 'service 0', img: 'img.jpg'},
{id: 1, name: 'service 1', img: 'img.jpg'},
{id: 2, name: 'service 2', img: 'img.jpg'},
{id: 3, name: 'service 3', img: 'img.jpg'},
{id: 4, name: 'service 4', img: 'img.jpg'},
{id: 5, name: 'service 5', img: 'img.jpg'},
{id: 6, name: 'service 6', img: 'img.jpg'},
{id: 7, name: 'service 7', img: 'img.jpg'},
]}
renderItem={renderServices}
keyExtractor={(item) => item.id.toString()}
numColumns={4}
ItemSeparatorComponent={() => <View style={styles.separator} />}
columnWrapperStyle={styles.columnWrapperStyle}
/>
</View>
{/* FlatList Services 2 */}
<View style={styles.servicesContainer}>
<View style={styles.servicesHeader}>
<Text style={styles.headerTitle}>Services</Text>
<TouchableOpacity>
<Text style={styles.headerTitle}>more</Text>
</TouchableOpacity>
</View>
<FlatList
scrollEnabled={false}
data={[
{id: 0, name: 'service 0', img: 'img.jpg'},
{id: 1, name: 'service 1', img: 'img.jpg'},
{id: 2, name: 'service 2', img: 'img.jpg'},
{id: 3, name: 'service 3', img: 'img.jpg'},
{id: 4, name: 'service 4', img: 'img.jpg'},
{id: 5, name: 'service 5', img: 'img.jpg'},
{id: 6, name: 'service 6', img: 'img.jpg'},
{id: 7, name: 'service 7', img: 'img.jpg'},
]}
renderItem={renderServices}
keyExtractor={(item) => item.id.toString()}
numColumns={4}
ItemSeparatorComponent={() => <View style={styles.separator} />}
columnWrapperStyle={styles.columnWrapperStyle}
/>
</View>
{/* FlatList Services 3 .... */}
....
{/* other data */}
....
</ScrollView>
</View>
);
};