从不同的地方设置样式

Question

我有一个 TouchableOpacity 背景颜色，我想根据条件更改它。

在中，他们通过控制状态中的样式来回答如何做到这一点

<TouchableOpacity
    style={{backgroundColor:this.state.backgroundColor}}
>

在我的例子中，我的 TouchableOppacity 有很多样式属性，为了保持代码简洁，我不想在我的渲染函数中定义所有它们，因为它们中的大多数不依赖于任何条件。

通常我这样做：

<TouchableOpacity style={styles.button}>

// and then at the end of the file I define the styles
const styles = StyleSheet.create({
  button: {
    borderRadius: 15,
    width: 200,
    height: 50,
    margin: 20,
    alignItems: "center",
    justifyContent: "center"
  }
}

现在我需要将两者结合起来，能够从文件末尾的 styles.button 中设置状态和其余属性。

有没有办法组合来自不同地方的样式，这样我就可以在文件末尾定义静态样式，在我的 class 中定义动态样式？

我试过类似的东西：

<TouchableOpacity style={{backgroundColor: this.state.backgroundColor}, styles.button}>

但是虽然它正确地设置了 styles.button 属性但它没有设置 backgroundColor。

Answer 1

您可以通过以下代码实现：

<TouchableOpacity style={[{backgroundColor: this.state.backgroundColor}, styles.button]}>

从不同的地方设置样式

setting styles from different places

react-native

touchableopacity