image - 如何将图像制作为切换按钮以在本机反应中显示两个不同的图像

Question

我正在做反应原生项目。在那，我必须显示自定义图像，如切换按钮，其中，对于关闭一个图像和打开另一张图像，我必须显示，并且，两个组件应该必须根据 ON/OFF 状态显示。

我是这个领域的新手。

我知道设置图像可触摸/Onpress，但是，如何设置自定义图像并根据该组件开关进行切换。

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

}

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

有什么建议么？

Answer 1

您需要将切换按钮的当前状态存储在状态变量中：

this.state={
toggle:false
}

那么您需要更改 TouchableOpacity 的 onPress 方法中的状态。之后，您只需要条件渲染来显示不同的图像

   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}/>

}
)