Question

我正在做本机项目。在这种情况下，我必须显示自定义图像，例如切换按钮；在这种情况下，必须显示一个图像为OFF，而另一个图像为ON，并且必须根据ON / OFF状态显示两个组件。

我是这个域的新手。

我知道如何设置可触摸/按动的图像，但是，如何设置自定义图像以及如何根据组件切换来进行切换。

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

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

1 个答案: