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

Question

i'm tring to use opacicy with react-native and styled-components

I want to make it look lighter by using opacity for the background color.

but when i use my code nothing happend

how can i use that?

this is my code

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

Answer 1

Your code seems right. I tested it and it works, just hit the button and you will be able to see the same color with opacity.

Answer 2

As of now we can use activeOpacity as below

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

Little bit R&D

As per my knowledge with following version

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

if we try below code then it will throw error

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

if we try below

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

then it will set opacity to view by default not while onPress