包裹在 SafeAreaView 中的 React Native FlatList ListHeaderComponent 不遵守 SafeAreaView 的边界

Question

描述

你好，我是 React Native 的新手，我试图在 ScrollView 中渲染 FlatList，我在 FlatList 中提到这个应用程序时遇到错误 ScrollView 是不正确的，它可能会导致一些滚动迷失方向。所以，我搜索了这个问题的解决方案，发现 ListHeaderComponent 属性用于 FlatList 来渲染 ScrollView 中的所有其他内容。我已经在我的屏幕上实现了这个解决方案，但现在它不考虑 SafeAreaView 的边界，这很烦人，我不想将硬编码 margin/padding 添加到外部 ScrollView/View 零件。不会好看的

当前实施

screens/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;

components/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 似乎是不正确的。我已经将我的代码更新到下面，它已经解决了。

screens/Home.js

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

包裹在 SafeAreaView 中的 React Native FlatList ListHeaderComponent 不遵守 SafeAreaView 的边界

React Native FlatList ListHeaderComponent wrapped in SafeAreaView doesn't respect the boundaries of SafeAreaView

javascript

reactjs

react-native

react-native-flatlist

safeareaview

描述

当前实施

当前执行结果

我想完成的事情