Question

我有一排控件/按钮，每个都有相同的样式。是否有更有效的方法（换句话说，一种使用更少代码的方法）来应用样式而不必在每个组件上使用style属性？

<View>
  <TouchableHighlight style={styles.control}>
    <Text style={styles.text}>Left</Text>
  </TouchableHighlight>
  <TouchableHighlight style={styles.control}>
    <Text style={styles.text}>Right</Text>
  </TouchableHighlight>
  <TouchableHighlight style={styles.control}>
    <Text style={styles.text}>Up</Text>
  </TouchableHighlight>
  <TouchableHighlight style={styles.control}>
    <Text style={styles.text}>Down</Text>
  </TouchableHighlight>
</View>

我考虑为每个控件创建一个对象数组并在其上进行映射以重复控件，但如果我能避免它，我宁愿不这样做。

Answer 1

<View>
  {['Left', 'Right', 'Up', 'Down'].map((direction) => {
    return (
      <TouchableHighlight style={styles.control}>
        <Text style={styles.text}>{direction}</Text>
      </TouchableHighlight>
    );
  })}
</View>

如何在React-native中重复样式

1 个答案: