React-Native中实现double modal双层模态框遇到问题该如何解决？

一、基于 react-native-elements Overlay 组件修复 #

双弹窗仅展示第一个问题 #

• 两个Overlay需设置差异化zIndex属性，后弹出的模态框zIndex取值高于先弹出的10以上，避免层级覆盖，同时确保两个组件的visible属性在需要展示时均为true。

height属性设置无效问题 #

• 直接给Overlay组件设置height属性会作用于外层全屏遮罩，不会修改内部弹窗容器尺寸，需通过overlayStyle属性传入高度样式，示例：

<Overlay
  visible={showSecondModal}
  zIndex={100}
  overlayStyle={{ height: 300, width: '80%' }}
>
  {/* 弹窗内容 */}
</Overlay>

二、自定义双层模态框实现 #

如果要自行封装组件，背景调暗效果通过全屏绝对定位的半透明遮罩层实现，完整示例如下：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const DoubleModalDemo = () => {
  const [showFirstModal, setShowFirstModal] = useState(false);
  const [showSecondModal, setShowSecondModal] = useState(false);

  return (
    <View style={styles.pageContainer}>
      <TouchableOpacity onPress={() => setShowFirstModal(true)}>
        <Text>打开第一层模态框</Text>
      </TouchableOpacity>

      {/* 第一层模态框 */}
      {showFirstModal && (
        <View style={styles.maskLayer}>
          <View style={styles.modalBox}>
            <Text>第一层模态框内容</Text>
            <TouchableOpacity onPress={() => setShowSecondModal(true)} style={styles.btn}>
              <Text>打开第二层模态框</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => setShowFirstModal(false)} style={styles.btn}>
              <Text>关闭第一层</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}

      {/* 第二层模态框 */}
      {showSecondModal && (
        <View style={[styles.maskLayer, { zIndex: 100 }]}>
          <View style={[styles.modalBox, { height: 200 }]}>
            <Text>第二层模态框内容</Text>
            <TouchableOpacity onPress={() => setShowSecondModal(false)} style={styles.btn}>
              <Text>关闭第二层</Text>
            </TouchableOpacity>
          </View>
        </View>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    paddingTop: 50,
  },
  // 遮罩层：实现背景调暗效果
  maskLayer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    // rgba最后一位为透明度，取值0-1，数值越大背景越暗
    backgroundColor: 'rgba(0,0,0,0.6)',
    zIndex: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalBox: {
    width: '80%',
    height: 300,
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
  },
  btn: {
    marginTop: 20,
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 4,
  }
})

注意事项 #

• 两层模态框必须设置不同zIndex，第二层取值需高于第一层，避免被下层遮罩覆盖
• 关闭弹窗时按弹出顺序反向操作，先关闭第二层再关闭第一层即可

内容的提问来源于stack exchange，提问作者Craig