react-native-paper的IconButton如何在iOS与Android端统一设置背景色

方案1：V5及以上版本使用官方原生属性（最简便） #

react-native-paper V5版本开始给IconButton新增了containerColor专属属性，专门用来设置组件背景色，双端适配无需额外处理，直接替换你原来style里的backgroundColor配置即可：

<IconButton
    containerColor="#DBD7D2"
    style={{
     position: 'absolute',
     top: hp('7%'),
     alignSelf: 'flex-end',
     right: wp('0.2%'),
    }}
    icon="layers-outline"
    color={Colors.black}
    size={hp('3.5%')}
    onPress={() => setSatellite((prev) => !prev)}
/>

方案2：全版本兼容方案（外层包裹View） #

如果用的是旧版本react-native-paper，直接在外层套一层View，把背景色、定位相关属性都放在View的样式上，双端100%生效：

<View style={{
    backgroundColor: "#DBD7D2",
    position: 'absolute',
    top: hp('7%'),
    alignSelf: 'flex-end',
    right: wp('0.2%'),
    // 按需调整圆角匹配IconButton默认圆形样式
    borderRadius: hp('3.5%'),
    padding: hp('1%') // 按需调整内边距控制整体大小
}}>
    <IconButton
        icon="layers-outline"
        color={Colors.black}
        size={hp('3.5%')}
        onPress={() => setSatellite((prev) => !prev)}
        style={{ margin: 0 }} // 去掉IconButton默认边距，避免外层容器变大
    />
</View>

错误原因说明 #

你之前给background属性直接传字符串报错，是因为该属性不接收普通颜色字符串，需要传入符合底层Ripple规范的配置对象，新手不推荐直接使用该属性，用上述两个方案即可覆盖所有场景。

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