如何使用flexbox为FlatList中的项目分隔符设置固定宽度？

Question

我想制作一个元素网格，其中包含一个固定宽度为1＆＃34; pixel ＆＃34;的分隔符。就像在iOS的Photo应用网格中一样。

对于FlatList中的项目宽度，我使用flex样式，因为我无法在不同的屏幕上预测它们的宽度。

代码示例：https://snack.expo.io/ryK_zPmEM

但是在iPhone 7 Plus（真实设备）上我得到了这个结果：

第二个和第三个单元格之间的分隔符具有样式marginLeft: 1，但看起来比其他两个分隔符更宽。

这是iPhone 5S模拟器的屏幕截图：

结果是相反。您还可以注意到行之间的分隔符厚度也不同。

问题是：应为margin样式设置什么值，以便分隔符对于所有屏幕尺寸看起来相同，并且没有更改行中单元格之间的宽度？< / p>

或者我需要计算单元格宽度的确切值，而不是使用 flex: 1？

完整代码示例：

const WINDOW_WIDTH = Dimensions.get('window').width
const ITEMS_PER_ROW = 4
const MARGIN_WIDTH = 1

const TOTAL_MARGIN_WIDTH = MARGIN_WIDTH * (ITEMS_PER_ROW - 1)
const CELL_SIZE = (WINDOW_WIDTH - TOTAL_MARGIN_WIDTH) / ITEMS_PER_ROW

const listData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]

export default class App extends Component {
  _renderItem = ({item, index}) => {
    return (
      <View style={[styles.cell, (index % 4 !== 0) ? styles.cellMargin : {}]}>
        <Text>{item}</Text>
      </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          contentContainerStyle={styles.list}
          columnWrapperStyle={styles.listColumn}

          data={listData}
          numColumns={ITEMS_PER_ROW}
          keyExtractor={i => i}
          renderItem={item => this._renderItem(item)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
  list: {
    backgroundColor: 'cyan',
    flex: 1,
  },
  listColumn: {
    marginTop: 1,
    height: CELL_SIZE,
    backgroundColor: 'white',
  },
  cell: {
    backgroundColor: 'green',
    flex: 1,
  },
  cellMargin: {
    marginLeft: MARGIN_WIDTH,
  }
});