隐藏默认图像

Question

我是新来的本地人。我正在演示项目中，我有三个按钮，单击按钮时必须显示3个不同的图像。单击之前，显示默认图像。我如何隐藏并仅在按下按钮时显示它。 Plaese看到了我得到的图像。我的代码是

 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张图像。

Answer 1

<View style={{flex:0.7}}>
{this.state.imgOpacity == 3 ? <Image
style={{ width: 100, height:100, opacity: this.state.imgOpacity }}
source={require('./third.png')}
/>:null}

更改为

{this.state.imgOpacity == 3 && <Image
style={{ width: 100, height:100, opacity: this.state.imgOpacity }}
source={require('./third.png')}
/>}