React Native 子视图无内外边距却可见父视图背景问题求助

问题根因 #

这个缝隙是Android设备上React Native的逻辑像素转物理像素时的浮点精度误差导致的：不同设备的像素密度（dpr）不同，你设置的逻辑高度在转换成物理像素时会出现小数，系统渲染时会对小数像素做截断或四舍五入，多个子组件的误差累计后就会透出父容器的红色背景，你观察到的子行高度异常取整就是这个原因。

适配方案（支持动态高度、自定义borderWidth，不破坏原有布局） #

方案1：使用官方像素对齐API（推荐） #

用React Native自带的PixelRatio.roundToNearestPixel方法处理所有子行的高度值，这个方法会自动根据当前设备的像素密度，把逻辑高度转换为无浮点误差的适配值，从根源消除半像素缝隙。

代码改动示例：

1. 导入依赖

import { PixelRatio } from 'react-native';

2. 调整ChildrenRow高度逻辑

const ChildrenRow = ({ dynamicHeight = 59 }) => {
    return (
        <View 
            onLayout={(event) => {
                const {width, height} = event.nativeEvent.layout;
                console.log(`Height/Width= ${height} and ${width}`)
            }}
            style={{
                // 固定高度和动态高度都可以用这个方法包裹
                height: PixelRatio.roundToNearestPixel(dynamicHeight),
                width:400,
                backgroundColor:'black',
                // 自定义borderWidth不受影响，也可搭配StyleSheet.hairlineWidth使用适配最小边框
                borderWidth: 1,
                borderColor: '#ccc',
                margin:0,
                padding:0,
            }}/>
    )
}

方案2：极小负值margin兼容（改动最小） #

如果不想改动高度计算逻辑，可以直接给所有ChildrenRow添加一个极微小的负的底部外边距，视觉上完全无感知，但可以抵消掉取整带来的微小缝隙，兼容所有动态高度和border场景：

style={{
    height:59,
    width:400,
    backgroundColor:'black',
    borderWidth: 1,
    margin:0,
    padding:0,
    // 新增这一行即可
    marginBottom: -0.02,
}}

验证方法 #

修改后通过onLayout打印子行高度，不会再出现异常的小数取值，父容器的红色背景也不会再透出。

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