Как создать представление A закрытое, тогда представление B необходимо показать, используя реагировать нативно?

Question

В моем сценарии я создаю одну страницу и два просмотра. View A и View B, здесь я поддерживаю два представления A и B в вызове функции с отдельным рендерингом. Просмотр Если у вас есть кнопка «Закрыть», после того как ее кликабельно активировано, 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>
)
}

Answer 1

Используя логическое значение, это очень легко сделать. Пример кода:

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

В этом случае вы будете визуализировать View A, когда booleanVariable равен true, и View B, если он false. Затем вы можете использовать ваши методы, чтобы изменить эту переменную с true на false.