Javascript 如何创建在react native中按时更改背景颜色的按钮？

如何创建更改

style={styles.view}

背景颜色的按钮/触摸不透明度

    <View style={styles.view}>

      {user &&
        <>
          <TouchableOpacity onPress={carregaUsuarioAnonimo}>

            <Image
              style={styles.avatar}
              source={{ uri: user.picture }} />
          </TouchableOpacity>

          <Text style={styles.nome_usuario}>{user.name}</Text>
        </>

      }



      <ScrollView style={styles.scrollview} ref={(view) => { setScrollview(view) }}>
        {
          mensagens.length > 0 && mensagens.map(item => (

            <View key={item.id} style={styles.linha_conversa}>
              <Image style={styles.avatar_conversa} source={{ uri: item.avatar }} />
              <View style={{ flexDirection: 'column', marginTop: 5 }}>
                <Text style={{ fontSize: 12, color: '#999' }}>{item.usuario}</Text>
                {typeof (item.mensagem) == "string" ?
                  <Text>{item.mensagem}</Text>
                  :
                  <Text> </Text>
                }

              </View>

            </View>




          ))
        }
      </ScrollView>


      <View style={styles.footer}>
        <TextInput
          style={styles.input_mensagem}
          onChangeText={text => setCaixaTexto(text)}
          value={caixaTexto} />

        <TouchableOpacity onPress={salvar}>
          <Ionicons style={{ margin: 3 }} name="md-send" size={32} color={'#999'} />

        </TouchableOpacity>




      </View>



    </View>)

{用户&&
{user.name}
}
{setcrolview（视图）}>
{
mensagens.length>0&&mensagens.map（项=>(
{item.usuario}
{typeof（item.mensage）=“string”？
{item.mensage}
:
}
))
}
setCaixaTexto（文本）}
值={caixaTexto}/>
)

您可以在样式内部创建一个条件，如下所示：

在您的状态中创建一个布尔值，并在单击按钮时将其值更改为true

在你的触控范围内，放弃条件

style={
this.state.buttonCliked ? styles.backgroundBlue : 
styles.backgroundGreen
}

我希望它能帮助您。

这是一个例子：-

state={isClicked:false}


checkToChangeStyle=()=>{
 this.setState({isClicked:!this.state.isClicked})
}


 return(
  <TouchableOpacity onPress={this.checkToChangeStyle} 
  style={this.state.isClicked ? styles.backGround1 : styles.backGround2}>
  <Text>Your Button</Text>
  </TouchableOpacity>
 )


const styles=StylesSheet.create({
 backGround1:{backgroundColor:'green'},
 backGround2:{backgroundColor:'red'},
})

state={isClicked:false}
checkToChangeStyle=（）=>{
this.setState（{isClicked:！this.state.isClicked}）
}
返回(
你的钮扣
)
const styles=StylesSheet.create({
背景1:{backgroundColor:'green'}，
背景2:{backgroundColor:'red'}，
})