javascript - 如何在 React Native 中将数组中的元素设置为表格样式

Question

如何为具有 4 列 6 行的表格的数组中的 24 个元素设置样式？

该数组有 24 个元素，如下所示:

const words = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x" ]

我将它们映射到渲染方法中:

<View>
  {words.map((word, id) => (
    <View key={id}><Text>{word} </Text></View>
  ))}
</View>

Answer 1

您可以使用一些简单的 Flex 属性:

const styles = StyleSheet.create({
  table: {
    flexWrap: 'wrap',
    flexDirection: 'row'
  },
  cell: {
    flexBasis: '25%',
    flex: 1,
    borderWidth: 1
  }
});

然后:

<View style={styles.table}>
  {words.map((word, id) => (
    <View style={styles.cell} key={id}><Text>{word} </Text></View>
  ))}
</View>

https://snack.expo.io/@morkadosh/mad-salsa