Сокрытие изображения по умолчанию на прессе в реагировать родной - PullRequest
0 голосов
/ 23 апреля 2019

Я новичок, чтобы реагировать на родных.Я работаю над демо-проектом, у меня есть три кнопки, я должен показать 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 изображения не открываются.

enter image description here

1 Ответ

0 голосов
/ 23 апреля 2019
<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')}
/>}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...