Как показать оверлейную страницу, используя реакционную систему для iOS и android?

Question

В моем коде у меня два экрана с двумя разными class файлами. Здесь я должен сделать экран одним нажатием кнопки, чтобы показать экран два. Экран два должен отображаться как экран overlay, и если нажать кнопку «Экран два», он должен dissolve и вернуться к экрану один. как этого добиться?

пример экрана введите описание изображения здесь

ниже кода, который я использую для клика, чтобы вызвать другую страницу

<TouchableOpacity
              onPress={() => {
                this.setState({ isVisible: false });
                this.props.navigation.navigate('screen2');
              }}>

Экран два кода ниже

render () {
        const Screentwo = this.renderCarousel('test');
        return (
            <SafeAreaView style={styles.safeArea}>
                <View style={styles.container}>
                    <StatusBar
                      translucent={true}
                      backgroundColor={'rgba(0, 0, 0, 0.3)'}
                      barStyle={'light-content'}
                    />
                    <ScrollView
                      style={styles.scrollview}
                      scrollEventThrottle={200}
                      directionalLockEnabled={true}
                    >
                    </ScrollView>
                </View>
            </SafeAreaView>
        );
    }

Answer 1

Попробуйте, это поможет вам

import React, { useState } from "react";
 import {
          View,
          Text,
          TouchableWithoutFeedback,
          StyleSheet,
          Button,
          Modal,
          TouchableOpacity
        } from "react-native";

        function MenuTask() {
          const [isVisible, onDisapearCallBack] = useState(false);
          return (
            <View
              style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
                backgroundColor: "orange"
              }}
            >
              <Modal animationType="fade" transparent={true} visible={isVisible}>
                <TouchableWithoutFeedback onPress={() => onDisapearCallBack(false)}>
                  <View style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.7)" }}>
                    <TouchableWithoutFeedback>
                      <View
                        style={{
                          flex: 1,
                          justifyContent: "center",
                          alignItems: "center",
                          backgroundColor: "white",
                          marginVertical: 150,
                          marginHorizontal: 10
                        }}
                      >
                       {class 2 code}
                      </View>
                    </TouchableWithoutFeedback>
                  </View>
                </TouchableWithoutFeedback>
              </Modal>
          {class 1 code}
            </View>
          );
        }

        export default MenuTask;

Answer 2

Вы обязательно должны проверить Модальный компонент React Natives https://reactnative.dev/docs/modal#__docusaurus

или найти что-то похожее, например, предоставленное сообществом на github.