如何为具有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>

最佳答案

您可以使用一些简单的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

关于javascript - 如何在React Native中将数组中的元素设置为表格样式,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56582168/

10-12 13:01
查看更多