Question

所以我想使用Modal来禁用屏幕上的所有交互，但我仍然希望屏幕上的所有内容都可见。这很奇怪，因为它之前对我来说工作得很好，然后我试图让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

Answer 2

在transparent={true}

上试试<Modal />

React Native Modal透明不起作用

2 个答案: