如何使用 React Native 创建模态窗口？答案

【问题标题】：How to create Modal Window using React Native?如何使用 React Native 创建模态窗口？
【发布时间】：2018-07-31 15:07:00
【问题描述】：

开发者！

我尝试使用 React 创建一个简单的模态窗口。

但是我的窗口仍然没有出现！

所以，我的代码有两部分：JS 部分和 CSS 部分。

我使用了“Modal”关键字、构造函数和 render()。我所有的代码都写在 CodePen 区域，所以我可以看到结果。但仍然缺少一些东西。这是什么？

它将是移动应用程序。那么，我应该在某处使用关键字“Native”吗？

import "./modal.scss";

class Modal extends React.Component {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps) {
    return !I.is(this.props.data, nextProps.data);
  }

  render() {
    let isOpen = this.props.data.get("isOpen");
    return (
      <div className={`flex middle center modal ${isOpen ? "open" : ""}`}>
      {isOpen ?
        (<div className={`row modal-content ${this.props.size || ""}`}>
          <div className="col-12 middle modal-title">{this.props.title}</div>
          <div className="col-12 modal-body">
            {this.props.body}
          </div>
          <div className="col-12 middle modal-footer">{this.props.footer}</div>
        </div>) : null
      }
      </div>);
  }
}

export default Modal;

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.55);

  .modal-content {
    background-color: white;
    max-height: 80%;
    height: 80%;

    .modal-title {
      padding: 0 2.25rem;
      height: 5rem;
      max-height: 5rem;
      text-transform: uppercase;
      font-size: 1.8rem;
    }

    .modal-body {
      height: calc(100% - 16rem);
      overflow-y: scroll;
      padding: 0 2rem;
    }

    .modal-footer {
      height: 5rem;
      max-height: 5rem;
      padding: 0 2.25rem;
    }
  }
}

另见 CodePen 的片段： enter image description here

【问题讨论】：

这似乎与 React Native 无关
如何让它成为 React Native？
这个链接应该可以帮助你：facebook.github.io/react-native/docs/modal
顺便说一句，你不能只是复制过去的 react 代码来创建一个 React Native 应用程序（也许有一些工具，但我无法帮助你）

标签： javascript css react-native

【解决方案1】：

import Modal from "react-native-modal";

render () {
    return (
      <View>
        <Modal isVisible={true}>
          <View style={{ flex: 1 }}>
            <Text>I am the modal content!</Text>
          </View>
        </Modal>
      </View>
    )
  }

另见https://github.com/react-native-community/react-native-modal

【讨论】：

这个是真的。但是我的 CodePen 工具中没有看到可见的模态窗口。缺了点什么。（附截图）

【解决方案2】：

我认为您要做的是制作一个移动应用程序。最好的方法是使用 React React Native 而不是 React

看看这个：

https://github.com/react-community/create-react-native-app

一旦您开始在屏幕上显示模式，就非常简单了。

https://facebook.github.io/react-native/docs/modal#docsNav

如果这是您第一次，最好遵循 React Native 网站上的入门指南。它很有帮助。没有 div，但仍可以使用内联样式。

https://facebook.github.io/react-native/docs/getting-started

希望对你有帮助

【讨论】：