如何在react native中改变条件渲染中按钮的不透明度

Question

我是新手。我已经创建了一个表单。其中我根据服务器响应渲染一些按钮。现在我想设置按钮的不透明度50%意味着。我想要这个按钮看起来像一个禁用的按钮。如果有可能，请帮忙。谢谢。我想在第一行代码

中设置不透明度这是我的代码

{data.bank_account_details_data[0] != null && ( 
<TouchableOpacity>
<Card center middle shadow style={styles.category} >
OTHER INFORMATION
</Text>
</Card>
</TouchableOpacity>
)}

Answer 1

您可以根据styleprop中的条件使用三元表达式(如您的第一行)设置TouchableOpacity的不透明度。

简化的例子:

export default function App() {
const [hasOpacity, setHasOpacity] = React.useState(false)
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {
setHasOpacity(!hasOpacity)
}} 
activeOpacity={0.2}
style={{opacity: hasOpacity ? 0.5 : 1.0}}
>
<Text>Test</Text></TouchableOpacity>
</View>
);
}

https://snack.expo.io/a1Y-TU4XB

在您的示例中，它可能像这样:

<TouchableOpacity 
activeOpacity={0.2}
style={{opacity: data.bank_account_details_data[0] != null ? 0.5 : 1.0}}
>

Answer 2

你可以这样写

<TouchableOpacity 
// opacity value ranges from 0 to 1
activeOpacity={0.9}  //opacity for on touch behaviour
style={{opacity:0.9}} // opacity for view behaviour
onPress={()=>{
console.log("i am here")
}}>
<Text style={{color:"#FFF"}}>This is opacity check</Text>
</TouchableOpacity>

不透明度的静态值，你可以使用状态，道具或值从后端作为一个变量