如何创建一个在反应本机中按更改背景颜色的按钮?

Question

如何创建一个按钮/可触摸不透明度来更改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>)

Answer 1

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

在状态内创建一个布尔值，并在单击按钮时将其值更改为 True。

在您的可触摸设备中，放下条件。

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

我希望它对你有所帮助。

Answer 2

这是一个例子：-

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