CodeWithMosh列表页面：iOS与Android Padding表现不一致及双重Padding问题

问题描述 #

• 在CodeWithMosh的视频末尾提到，录制时在自定义Screen组件中设置Padding，iOS端不生效但Android端显示正常
• 按照视频建议调整后，Android端出现双重Padding问题

问题代码 #

import React from 'react';
import { View,  SafeAreaView, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

function SafeScreen({children, style}) {
    return (
        <SafeAreaView style={[styles.screen, style]}>
            <View style={style}>{children}</View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    screen: {
        paddingTop: Constants.statusBarHeight,
        flex: 1,
    }
})

export default SafeScreen;

问题根源 #

1. 重复应用样式：SafeAreaView和内部嵌套的View同时接收了传入的style属性，若style中包含padding相关设置，会导致样式叠加
2. 冗余的手动padding：styles.screen中手动设置了paddingTop: Constants.statusBarHeight，而Android平台的SafeAreaView本身会自动适配状态栏安全区域，手动添加padding会造成双重间距

解决方案 #

移除冗余的手动padding，并避免重复应用样式，修改后的代码如下：

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

function SafeScreen({children, style}) {
    return (
        <SafeAreaView style={styles.screen}>
            <View style={style}>{children}</View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
    }
})

export default SafeScreen;

如果需要给SafeAreaView本身添加自定义样式，可以调整为：

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

function SafeScreen({children, style}) {
    return (
        <SafeAreaView style={[styles.screen, style]}>
            <View>{children}</View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
    }
})

export default SafeScreen;

说明 #

• 目前SafeAreaView已实现跨平台适配，无需手动通过Constants.statusBarHeight设置顶部padding，iOS和Android会自动处理安全区域间距
• 确保样式只应用在需要的层级上，避免重复叠加导致布局异常

内容的提问来源于stack exchange，提问作者Shajeed