React Native Android端设置固定宽高后实际值偏差引发拼接缝隙问题

问题根本原因 #

该问题是React Native在不同密度设备上逻辑像素转物理像素时的浮点精度误差导致的：iOS设备的像素密度通常为2x、3x这类整数倍，你设置的逻辑像素刚好可以对应整数物理像素，不会出现偏差；而Android设备的像素密度比例多为非整数（比如你使用的Pixel 2为2.625x），逻辑像素转物理像素时的四舍五入误差会导致实际渲染尺寸和设置值出现微小偏差，最终拼接时出现缝隙。

可落地解决方案 #

• 方案1：用官方API统一校准尺寸
  使用RN内置的PixelRatio.roundToNearestPixel()方法处理所有手动设置的尺寸，这个方法会自动把你设置的逻辑像素调整为可以对应整数物理像素的最优值，从根源避免精度误差。
  修改示例：

import { View, PixelRatio } from "react-native";

// 调整尺寸定义
const rawCellSize = 53;
const cell_size = PixelRatio.roundToNearestPixel(rawCellSize);
// 所有衍生尺寸同样做处理
const containerWidth = PixelRatio.roundToNearestPixel(cell_size * 7);
const containerHeight = PixelRatio.roundToNearestPixel(cell_size * 9);

后续所有用到宽高的位置都使用处理后的值即可。

• 方案2：加极小负边距遮盖缝隙
  可以直接用RN内置的StyleSheet.hairlineWidth（代表当前设备的最小物理像素宽度）作为负margin值，不会影响整体布局的同时刚好遮盖缝隙：

// 单元格样式修改
style={{
  width: cell_size,
  height: cell_size,
  backgroundColor: "white",
  margin: -StyleSheet.hairlineWidth
}}

如果只存在横向或纵向缝隙，可以只设置marginHorizontal或者marginVertical。

• 方案3：改用flex布局自动分配尺寸
  针对网格类布局，不需要手动给单元格设置固定宽度，通过flex属性让RN自动分配每行的宽度，就不会出现拼接偏差：

// 行样式保留flexDirection: "row"即可
// 单元格样式去掉固定width，新增flex: 1
style={{
  flex: 1,
  height: cell_size,
  backgroundColor: "white",
}}

• 方案4：用官方列表组件实现网格
  直接用FlatList的numColumns属性实现网格，RN官方组件已经做了跨平台的精度适配，不需要自己处理拼接问题：

<FlatList
  data={new Array(63).fill(0)} // 7*9=63个单元格
  numColumns={7}
  renderItem={() => <View style={{flex:1, height: cell_size, backgroundColor: 'white'}} />}
/>

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