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" ]

然后我将它们映射到render方法中

<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

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

1 个答案: