如何在 react-native 样式的组件中使用不透明度？答案

【问题标题】：How can i use opacity in react-native styled components?如何在 react-native 样式的组件中使用不透明度？
【发布时间】：2021-07-24 13:40:42
【问题描述】：

我正在尝试将不透明与 react-native 和 styled-components 一起使用

我想通过使用不透明度作为背景颜色使其看起来更亮。

但是当我使用我的代码时什么也没发生

我该如何使用它？

这是我的代码

    const CheckLabel = styled.Text`
    color: white;
    font-weight: bold;
    font-size: 13px;
    `;

    const NicknameButton = styled.TouchableOpacity`

    background: #08cfb4;
    opacity: 0.33;
    `;


    const Nickname = () => {

    return (
    <NicknameButton onPress={confirmname}>
    <CheckLabel>check</CheckLabel>
    </NicknameButton>
    )
    }

【问题讨论】：

标签： javascript reactjs react-native styled-components

【解决方案1】：

您的代码似乎正确。我测试了它，它可以工作，只需点击按钮，您就可以看到相同的颜色和不透明度。

【讨论】：

【解决方案2】：

目前我们可以使用activeOpacity，如下所示

 <NicknameButton activeOpacity={0.85} onPress={confirmname}>
    <CheckLabel>check</CheckLabel>
 </NicknameButton>

一点点研发

据我所知，以下版本

"react": "16.13.1"
"react-native": "0.63.4",
"styled-components": "^5.2.1"

如果我们尝试下面的代码，那么它会抛出错误

export const TouchableOpacity = styled.TouchableOpacity`
  active-opacity : 0.85;  
  height:100px;
  width:100px;
`

如果我们在下面尝试

export const TouchableOpacity = styled.TouchableOpacity`
  opacity : 0.85;  
  height:100px;
  width:100px;
`

那么它会默认设置不透明度来查看而不是在按下时

【讨论】：