如何在本机中单击按钮时隐藏和显示视图？

Question

我是本机新手

我有两个按钮A和B ....和两个视图V1和V2 ....默认情况下，V1是可见的，而V2是隐藏的。

如何实现

在按钮B上单击-使V2可见并隐藏V1

在按钮上单击，使V1可见并隐藏V2

Answer 1

您可以轻松地使用state

为特定视图创建一个渲染函数，并使用if/else块有条件地渲染它们。

renderViews() {
   if (this.state.viewVisible) {
      return <View1></View1>
   } else {
      return <View2></View2>
   }
}

将方法放置在{this.renderViews()}这样的渲染函数中，然后通过按钮和this.setState({viewVisible: true/false})

切换状态

Answer 2

定义您的状态：

state = {v1Visible: true, v2Visible: false }

在jsx中：

{this.state.v1Visible && <View><Text>View 1</Text></View>}
{this.state.v2Visible && <View><Text>View 2</Text></View>}

和按钮单击功能：

onButtonAClick = () => this.setState({v1Visible: true, v2Visible: false})
onButtonBClick = () => this.setState({v1Visible: false, v2Visible: true})