时间戳

首页 > 解决方案 > 如何创建视图 A 关闭然后视图 B 需要使用本机反应显示？

android - 如何创建视图 A 关闭然后视图 B 需要使用本机反应显示？

问题描述

在我的场景中，我正在创建单页两个视图。View A并且View B，在这里，我在具有单独渲染的函数调用中维护两个视图 A 和 B。视图 A 具有关闭按钮，一旦其可点击启用，则View A需要隐藏并View B需要呈现。如何做到这一点？

Main Render

RenderMain() {
      return (
        <View>
        ………….
    </View>
        {this.renderViewA()} // Here rendering view A on main view
)
}

View A Function 

renderViewA() {
      return (
        <Overlay>
        …………. // Here rendering View A close click to hide View A and show View B
    </Overlay>
)
}

View B Function

renderViewB() {
      return (
        <Overlay>
        ………….
    </Overlay>
)
}

标签： androidiostypescriptreact-native

解决方案

使用布尔值很容易做到。示例代码：


//Create the variable either with useState or state depending on the component
state = {
booleanVariable: true
}

//call your views or functions conditionally
return (
<React.Fragment>
{ booleanVariable && <View A></View A>}

{ !booleanVariable && <View B></View B>}
</React.Fragment>
)

在这种情况下，您将在 booleanVariable 为真时渲染视图 A，而在其为假时渲染视图 B。然后，您可以使用您的方法将该变量从 true 更改为 false。

推荐阅读