React Native 模态透明不起作用

Question

所以我想使用模态来禁用屏幕上的所有交互，但我仍然希望屏幕上的所有内容都可见。这很奇怪，因为它之前对我来说工作得很好，然后我尝试将 Modal 制作成自己的组件，但一旦我这样做了，它就停止正常工作。然后我又回到原来的做法，但仍然遇到同样的问题。我应该在它起作用的时候就承诺它。

知道我哪里错了吗？

这是我的代码：

import React, { Component } from 'react';
import { View, Image, Modal, Text, Button, TouchableHighlight } from 'react-native';

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: true,
    };
  }

  openModal() {
    this.setState({modalVisible: true});
  }

  closeModal() {
    this.setState({modalVisible: false});
  }



  render() {
      return (
        <View style={styles.container}>
          <Modal
            visible={this.state.modalVisible}
            onRequestClose={() => this.closeModal()}
          >
            <TouchableHighlight
            style={styles.modalContainer}
            onPress={() => this.closeModal()}
            >
              <Text>"Words n stuff"</Text>
            </TouchableHighlight>
          </Modal>
          <View
            style={styles.upperContainer}
          />
          <View
            style={styles.lowerContainer}
          />
        </View>
      );
    }
  }
}

款式：

 modalContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: 'transparent',
  },


 container: {
    flexGrow: 1,
    justifyContent: 'space-around',
    flexDirection: 'column',
    alignItems: 'center',
  },
  upperContainer: {
    flexGrow: 2,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 18,
    width: screenWidth,
    marginTop: -140,
  },
lowerContainer: {
    flexGrow: 2,
    alignItems: 'center',
    justifyContent: 'space-around',
    width: screenWidth,
  },

Answer 1

尝试将

transparent

属性添加到您的模态框。

示例：

<Modal
  transparent
  ...>
...
</Modal>

文档：https://facebook.github.io/react-native/docs/modal.html#transparent

Answer 2

在

transparent={true}

 上尝试 

<Modal />

Answer 3

...

这仅适用于presentationStyle =“overFullScreen”

对于其他选项，您将面临以下错误： 不支持具有“formSheet”呈现样式和“透明”值的模态