Как сделать изображение как кнопку переключения, чтобы показать два разных изображения в реагировать родной - PullRequest
Новая
       78

Как сделать изображение как кнопку переключения, чтобы показать два разных изображения в реагировать родной

0 голосов
/ 22 февраля 2019

Я делаю реакцию на родной проект.При этом я должен показать пользовательское изображение, такое как кнопка переключения. В этом случае для ВЫКЛЮЧЕНИЯ одного изображения и ВКЛ другого изображения, которое я должен отобразить, и при этом два компонента должны отображаться в соответствии с состояниями ВКЛ / ВЫКЛ.

Я новичок в этом домене.

У меня есть знания для настройки изображения touchable / Onpress, но, Как установить пользовательское изображение и действовать как переключатель в соответствии с переключателем этих компонентов. 

this.toggleAction() = () => {
//switching components for ON/OFF states

}

 <TouchableHighlight >
  <Image style={styles.imagestyle}
  source={require('./ic_toggle_on.png')} />
  onPress={() => this.toggleAction()}>
    </TouchableHighlight>

Есть предложения?

1 Ответ

0 голосов
/ 22 февраля 2019

Вам необходимо сохранить текущее состояние кнопки переключения в переменной состояния: 

this.state={
toggle:false
}

, затем вам нужно изменить состояние в методе onPress вашей TouchableOpacity.После этого вам просто нужно условный рендеринг, чтобы показать разные изображения 

   render(
<TouchableOpacity onPress={()=>this.setState({toggle:!this.state.toggle})}>
   
{
  this.state.toggle==true?
 <Image src={ YOUR TOGGLE ON SOURCE}/>
 :
 <Image src={ YOUR TOGGLE Off SOURCE}/>

}
)
...