时间戳

首页 > 解决方案 > 为什么我的样式没有在 React Native 中更新？

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

问题描述

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

标签： cssreactjsreact-native

解决方案

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

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

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

推荐阅读