Question

开发者！

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

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

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

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

它将是移动应用程序。因此，我应该在某个地方使用关键字“本地”吗？

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

Answer 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

Answer 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，但仍可以使用InLine样式。

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

希望这会有所帮助

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

2 个答案: