React-Native Component Modal Usage Details, react-nativemodal

Source: Internet
Author: User

React-Native Component Modal Usage Details, react-nativemodal

The Modal component can be used to overwrite the Native view (such as UIViewController and Activity) containing the React Native root view. It can be used to implement the mask effect.


Modal provides the following attributes:

AnimationType (animation type)PropTypes. oneOf (['none', 'slide', 'fade ']

  • None: No animation
  • Slide: slide from the bottom
  • Fade: fade into view

OnRequestClose (this function is called when it is destroyed)

This function must be called on the 'android' Platform

OnShow (called for modal display)

Transparent (transparency) bool

If this parameter is set to true, the transparent background rendering mode is used.

Visible (visibility)Bool

OnOrientationChange (called when the direction is changed)

When the modal direction changes, the provided direction is "or ". It is also called during initialization rendering, but the current direction is not considered.

SupportedOrientations (allows modal rotation to any specified orientation )['Portrait ', 'portrait-upside-low', 'landscape', 'landscape-left', 'landscape-Right'])

On iOS, the mode is still restricted by the UISupportedInterfaceOrientations field specified in info. plist.


Modal is very simple to use, for example:

<Modal animationType = 'slide' // slide from the bottom to transparent = {false} // opacity visible = {this. state. isModal} // determine whether to display onRequestClose = {() => {this. onRequestClose () }}// required for android>


Import React, {Component} from 'react '; import {AppRegistry, View, Modal, TouchableOpacity, Text} from 'react-native '; export default class ModalView extends Component {constructor (props) {super (props); this. state = {modalVisible: false, }} setModalVisible = (visible) => {this. setState ({modalVisible: visible})}; render () {return (<View style = {flex: 1, justifyContent: 'center', alignItems :' Center ', backgroundColor:' # ffaaff '}}> <Modal animationType = {'none'} transparent = {true} visible = {this. state. modalVisible} onrequestclose = {() => {alert ("Modal has been closed. ") }} onShow = {() => {alert (" Modal has been open. ")} supportedOrientations = {['portrait', 'portrait-upside-low', 'landscape ', 'landscape-left ', 'landscape-Right']} onOrientationChange = {() => {alert ("Modal has been OrientationCh Ange. ") }}> <View style = {flex: 1, marginTop: 22, backgroundColor: '# aaaaaa', justifyContent: 'center', alignItems: 'center' }}> <View> <Text> Hello World! </Text> <TouchableOpacity onPress = {() => {this. setModalVisible (false) }>< Text> hide Modal </Text> </TouchableOpacity> </View> </Modal> <TouchableOpacity onPress = {() => {this. setModalVisible (true) }>< Text> show Modal </Text> </TouchableOpacity> </View>) }} AppRegistry. registerComponent ('modalview', () => ModalView );

Running effect:

From the modal source code, we can see that modal actually uses absolute positioning, so when modal cannot meet our needs, we can encapsulate a modal by absolutely locating ourselves.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.