为什么我的样式没有在 React Native 中更新？答案

【问题标题】：Why are my styles not being updated in React Native?为什么我的样式没有在 React Native 中更新？
【发布时间】：2018-06-08 02:31:37
【问题描述】：

我有一个登录按钮，通常不透明度为 50%，但是当您在用户名和密码中输入文本或单击登录按钮时，它的不透明度应该为 100%（在全部）。但是，当单击按钮时，它会更改背景颜色，但不透明度仍为 50%。有谁知道为什么不透明度没有更新？

let readyForSignIn = this.state.email && this.state.password ? true : false;
let updateButton = this.state.loggingIn || readyForSignIn;

<TouchableOpacity style={[styles.buttonContainer, updateButton ? styles.buttonActive : styles.buttonDefault]} onPress={() => this.onSubmitEmail()}>
    {this.state.loggingIn ? 
        <Text style={[styles.buttonText, {color: '#000'}]}>
            Signing you in...
        </Text>
    :
        <Text style={[styles.buttonText, {color: '#fff'}]}>
            Sign In
        </Text>
    }
</TouchableOpacity>

这里是按钮的样式：

buttonContainer: {
    marginTop: 20,
    backgroundColor: '#3A3A3A',
    paddingVertical: 16,
    borderRadius: 3,
    shadowOpacity: 0.35,
    shadowColor: '#000',
    shadowOffset: {widget: 0, height: 2},
    shadowOpacity: 2
},
buttonDefault: {
    opacity: 0.5
},
buttonActive: {
    backgroundColor: '#fce443',
    opacity: 1
},

我也制作了这个问题的视频：

https://www.youtube.com/watch?v=mp1fXVyHxoY&feature=youtu.be

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

内联样式不保证样式的应用顺序（例如可以按字母顺序）。因此，您应该尽可能使用最具体的样式名称。

对于背景不透明度，请改用：

buttonDefault: {
    backgroundColor: rgba(58, 58, 58, 0.5);
},
buttonActive: {
    backgroundColor: rgba(252, 228, 67, 1);
},

【讨论】：

对于原生反应，我必须将 rgba 颜色代码放在引号中，但除此之外它工作得很好！！谢谢