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

Question

我有一个登录按钮，通常不透明度为 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

Answer 1

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

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

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