如何使图像作为切换按钮以在React Native中显示两个不同的图像

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
}

然后，您需要以触摸可触摸的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}/>
}
)