如何在反应本机的条件渲染中更改按钮的不透明度

Question

我是 React Native 的新手。我创建了一个表格。我在其中根据服务器响应呈现一些按钮。现在我想将按钮的不透明度设置为 50%。我希望该按钮现在看起来像已禁用。那么是否有可能，如果是，那么请帮忙。谢谢。我想在我的第一行代码中设置不透明度

这是我的代码

 {data.bank_account_details_data[0] != null && ( 

              <TouchableOpacity>
                <Card center middle shadow style={styles.category} >
                  OTHER INFORMATION
                  </Text>
                </Card>
              </TouchableOpacity>

              )}

Answer 1

你可以使用这样的东西

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

除了不透明度的静态值之外，您还可以使用来自后端的状态、道具或值作为变量

Answer 2

您可以根据 style 属性中的条件使用三元表达式（如第一行）设置 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}}
      >

如何在反应本机的条件渲染中更改按钮的不透明度

How to change Opacity of button in conditional rendering in react native

opacity

conditional-rendering

react-native