React-Native Component Modal Usage Details, react-nativemodal

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.

Attribute

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.

Example

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>

Example:

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.