React-Native 中的双模态？答案

【问题标题】：Double Modal in React-Native?React-Native 中的双模态？
【发布时间】：2021-09-18 00:51:08
【问题描述】：

我在尝试实现“双模态”（即同时使用两个模态）时遇到了很多困难。

例如

我正在使用“react-native-elements”库中的 Overlay 来实现模态效果，但是，将它们中的两个放在一个视图中是行不通的，因为它只会显示第一个。我还发现直接设置叠加层的高度没有任何效果。

然后我考虑创建一个自定义组件，但不知道如何使用 CSS 使背景变暗。

【问题讨论】：

在我的经验中，我的人民币只有模态一次可以一次。你需要他们两个在不同的时间出现吗？您想要实现的场景是什么？
@TommyLeong 我希望它们同时出现在示例图像中。当我将可见切换为真时，我希望示例图像中的两个白色矩形都显示出来并使其余的变暗。
请分享代码，以便我们参考。

标签： css reactjs react-native expo

【解决方案1】：

如果您愿意，请将您的元素模式更改为 react-native-modal。继续尝试并执行以下代码。我希望它对你有用。

import Modal from 'react-native-modal';

const [isModalVisible, setModalVisible] = useState(false);
  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

<TouchableOpacity onPress={toggleModal}>
  <Text>Button Text</Text>
    <Modal
      isVisible={isModalVisible}
      onBackdropPress={() => setModalVisible(false)}>
      <View style={{ backgroundColor: 'white', padding: 20, height:250 }}>
        <Text>First box content appear here</Text>
      </View>
      <View style={{ backgroundColor: 'white', padding: 20, height:100, marginTop: 30 }}>
        <Text>Second box content appear here</Text>
      </View>
  </Modal>
</TouchableOpacity>

【讨论】：