如何在 React-native 中重复样式

Question

我有一排controls/buttons，每一个都会有相同的风格。有没有更有效的方法（或者换句话说，使用更少代码的方法）来应用样式而不必在每个组件上使用样式属性？

<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 中重复样式

How to repeat styles in React-native

react-native