反应本机模态透明不起作用

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>

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