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);
},

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

1 个答案: