0

我想制作一个带有固定宽度为 1“像素”的分隔符的元素网格。就像在PhotoiOS 的应用程序网格中一样。

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

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

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

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

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

结果适得其反。您还可以注意到，行之间的分隔符的厚度也不同。

问题是：应该为margin样式设置什么值，以便分隔符对于所有屏幕尺寸看起来都一样，并且不会改变行内单元格之间的宽度？

或者也许我需要计算单元格宽度的确切值而不是使用 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,
  }
});
4

0 回答 0