时间戳

首页 > 解决方案 > React-Native 中的双模态？

css - React-Native 中的双模态？

问题描述

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

例如示例双模态

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

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

标签： cssreactjsreact-nativeexpo

解决方案

如果需要，请将您的元素模式更改为 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>

推荐阅读