如何使用 iOS 和 android 的 react native 显示覆盖页面？

Question

在我的代码中，我有两个屏幕，其中包含两个不同的 class 文件。在这里，我需要单击屏幕一键来显示屏幕二。屏幕二需要像overlay 屏幕一样显示，如果点击屏幕二按钮，那么它应该dissolve 并返回屏幕一。如何做到这一点？

示例屏幕enter image description here

下面的代码我用于点击调用另一个页面

<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

你应该明确地检查一下 React Natives 模态组件https://reactnative.dev/docs/modal#__docusaurus

或在 github 上搜索社区提供的类似您喜欢的内容。

Answer 2

试试这个对你有帮助

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;