React-Native 中的双模式？

Question

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

例如

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

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

Answer 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>

React-Native 中的双模式？

Double Modal in React-Native?

css

reactjs

react-native

expo