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

Question

developers!

I have tried to create a simple Modal Window with React.

But my window still not appeared!

So, my code have two parts: JS-part and CSS-part.

I used "Modal" keyword, constructor and render(). All my code was written in CodePen area, so I'm able to see the result. But still something missing. What is it?

It will be mobile application. So, should I use keyword "Native" somewhere?

 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; } } } 

See also a fragment from 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>
    )
  }

See also https://github.com/react-native-community/react-native-modal

Answer 2

I think what you're trying to do is make a mobile application. The best way to do that would be to use React React Native instead of React

Check this out:

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

Once you're started showing a modal on a screen is quite simple.

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

If this is your first time, it would be best to follow the getting started guide on React Native's website. Its helpful. There are no divs, but inLine styling can still be used.

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

Hope this helps