Я новичок, чтобы реагировать на родных.Я работаю над демо-проектом, у меня есть три кнопки, я должен показать 3 разных изображения при нажатии кнопки.Перед нажатием на изображение по умолчанию показывается.Как я могу скрыть и показать только при нажатии на кнопку.Пожалуйста, посмотрите на изображение, которое я получаю. Мой код
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
'imgOpacity': 0,
'imgOpacity':1,
'imgOpacity':2,
}
}
toggleImage() {
this.setState({ 'imgOpacity':1})
this.setState({ 'imgOpacity':2})
this.setState({ 'imgOpacity':3})
}
render() {
console.log("opacity",this.state.imgOpacity)
return (
<View style={{flex:1}}>
<View style={{flex:0.7}}>
{this.state.imgOpacity == 1 ? <Image
style={{ width: 100, height:100, opacity: this.state.imgOpacity }}
source={require('./best.png')}
/>:null}
</View>
<View style={{flex:0.3}}>
<Button title="Button1"
onPress={()=>this.toggleImage()}
/>
</View>
<View style={{flex:0.7}}>
{this.state.imgOpacity == 2 ? <Image
style={{ width: 100, height:100, opacity: this.state.imgOpacity, }}
source={require('./second.png')}
/>:null}
</View>
<View style={{flex:0.3}}>
<Button title="Button2"
onPress={()=>this.toggleImage()}
/>
</View>
<View style={{flex:0.7}}>
{this.state.imgOpacity == 3 ? <Image
style={{ width: 100, height:100, opacity: this.state.imgOpacity }}
source={require('./third.png')}
/>:null}
</View>
<View style={{flex:0.3}}>
<Button title="Button3"
onPress={()=>this.toggleImage()}
/>
</View>
</View>
);
}
}
Я хочу скрыть приходящее по умолчанию изображение, а также при нажатии кнопки только 3 изображения не открываются.