javascript - 包裹在 SafeAreaView 中的 React Native FlatList ListHeaderComponent 不尊重 SafeAreaView 的边界

Question

描述

你好，我是 React Native 的新手，我试图渲染一个FlatListinside a ScrollView，我收到一个错误，提到这个FlatListinside应用程序ScrollView不正确，它可能会导致一些滚动迷失方向。所以，我搜索了这个问题的解决方案，发现里面有渲染所有其他东西的ListHeaderComponent属性。我已经在我的屏幕上实现了这个解决方案，但现在它不考虑边界，这很烦人，我不想向外部组件添加硬编码的边距/填充。不会很漂亮。FlatListScrollViewSafeAreaViewScrollView/View

当前实施

屏幕/Home.js：

import React from 'react';
import {
    View,
    ScrollView,
    StyleSheet,
    Dimensions,
    SafeAreaView
} from 'react-native';

import SearchBar from '../components/UI/SearchBar';
import CarouselSlider from '../components/UI/CarouselSlider';
import FeaturedProducts from '../components/UI/FeaturedProducts';
import RecommendedCategories from '../components/UI/RecommendedCategories';
import ProductList from '../components/UI/ProductList';
import { HeadingSecondary } from '../components/UI/Typography';

import CarouselSliderData from '../data/slider';
import MostSold from '../data/mostSold';
import Categories from '../data/categories';

const { width } = Dimensions.get('window');

const Home = props => {
    const HeaderPart = (
        <ScrollView>
            <View style={styles.sectionSlider}>
                <CarouselSlider
                    data={CarouselSliderData}
                    height={width*0.6}
                    width={width}
                    itemWidth={width - (width/5)}
                />
            </View>
            <View style={styles.sectionFeatured}>
                <HeadingSecondary>Featured Products</HeadingSecondary>
                <FeaturedProducts data={MostSold} />
            </View>
            <View style={styles.sectionRecommendedCategories}>
                <HeadingSecondary>Recommended Categories For You</HeadingSecondary>
                <RecommendedCategories data={Categories} />
            </View>
            <HeadingSecondary>Recommended Products For You</HeadingSecondary>
        </ScrollView>
    );

    return (
        <SafeAreaView style={styles.container}>
            <SearchBar />
            <View style={styles.sectionProducts}>
                <ProductList
                    data={MostSold}
                    numColumns={2}
                    key={'Products'}
                    ListHeaderComponent={HeaderPart}
                />
            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    sectionSlider: {
        height: width*0.6,
        marginBottom: 12
    }
});

export default Home;

组件/UI/ProductList.js：

import React from 'react';
import {
    View,
    FlatList,
    StyleSheet,
    SafeAreaView
} from 'react-native';

import ProductItem from './ProductItem';

const ProductList = props => {
    return (
        <View style={styles.container}>
            <FlatList
                data={props.data}
                renderItem={itemData =>
                    <ProductItem {...itemData.item} />
                }
                {...props}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

export default ProductList;

目前的实施结果

我想要完成的

提前致谢！

Answer 1

似乎在 View 组件中使用 ListHeaderComponent/ListFooterComponent 属性包装 FlatList 是不正确的。我已经将我的代码更新到下面并且它已经解决了。

屏幕/Home.js

...
const Home = props => {
    ...
    return (
        <SafeAreaView style={styles.container}>
            <SearchBar />
            <ProductList
                data={MostSold}
                numColumns={2}
                key={'Products'}
                ListHeaderComponent={HeaderPart}
            />
        </SafeAreaView>
    );
};
...