Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve React Native Popup". In daily operation, I believe many people have doubts about how to achieve React Native Popup. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve React Native Popup"! Next, please follow the editor to study!

React Native officially provides Modal components, but Modal is a full-screen pop-up layer. When Modal is displayed, the operation area is only the elements in Modal, and the focus will be hijacked by Modal. Although mobile is not common, some scenarios still want to use a lightweight Popup.

In React Native, the level of the element is impenetrable, and the child element cannot block the parent element in any way. Therefore, we choose the scheme of adding Popup at the top level, setting absolute positioning, and dynamically adjusting the location of the Popup according to the specified elements when displayed.

Concrete realization

Popup will have two states: show or hide, which is controlled by a state.

Const Component = () = > {const [visible, setVisible] = useState (false); return ({visible & &});}

Popup belongs to the view class component, and the UI structure includes:

A View as a container, because iOS has bangs, you need to use SafeAreaView on iOS to avoid being obscured by bangs. Also add a click event monitor to close Popup when clicked.

A triangle that points to the target object.

A View of the contents of a package.

Because the location and content of the Popup are dynamic, two state are required to store the relevant data.

A CSS related to the storage location.

One stores dynamic content.

Const Component = ({style,... other}) = > {const [visible, setVisible] = useState (false); const [popupStyle, setPopupStyle] = useState ({}); const [content, setContent] = useState (null); const onPress = useCallback (() = > {setVisible (false);}, []); return ({visible & & createElement (Platform.OS = 'ios'? SafeAreaView: View, {style: {... styles.popup,... popupStyle,},}, {content},)});} Const styles = StyleSheet.create ({popup: {position: 'absolute', zIndex: 99, shadowColor:' # 333), shadowOpacity: 0.12, shadowOffset: {width: 2}, borderRadius: 4,}, triangle: {width: 0, height: 0, marginLeft: 12, borderLeftWidth: 8, borderLeftColor: 'transparent', borderRightWidth: 8, borderRightColor:' transparent', borderBottomWidth: 8 BorderBottomColor: 'white',}, content: {backgroundColor:' white',},})

Because it is a global Popup, a global variable is selected to provide Popup-related methods of operation.

If the global Popup is not applicable, you can insert the Popup as needed and use ref to provide the operation method.

The target element, dynamic content, and some related optional configurations are all passed in through parameters when the show method is called

UseEffect () = > {global.$popup = {show: (triggerRef, render, options = {}) = > {const {x: offsetX = 0, y: offsetY = 0}} = options.offset | {}; triggerRef.current.measure ((x, y, width, height, left, top) = > {setPopupStyle ({top: top + height + offsetY, left: left + offsetX,}); setContent (render ()) SetVisible (true);};}, hide: () = > {setVisible (false);},};}, [])

Complete code

Import React, {createElement, forwardRef, useState, useEffect, useCallback,} from 'react';import PropTypes from' prop-types';import {View, SafeAreaView, Platform, TouchableOpacity, StyleSheet,} from 'react-native';const Component = ({style,... other}, ref) = > {const [visible, setVisible] = useState (false); const [popupStyle, setPopupStyle] = useState ({}); const [content, setContent] = useState (null) Const onPress = useCallback (() = > {setVisible (false);}, []); useEffect () = > {global.$popup = {show: (triggerRef, render, options = {}) = > {const {x: offsetX = 0, y: offsetY = 0} = options.offset | | {} TriggerRef.current.measure ((x, y, width, height, left, top) = > {setPopupStyle ({top: top + height + offsetY, left: left + offsetX,}); setContent (render ()); setVisible (true);});}, hide: () = > {setVisible (false);},} }, []); return ({visible & & createElement (Platform.OS = = 'ios'? SafeAreaView: View, {style: {... styles.popup,... popupStyle,},}, {content},)};}; Component.displayName = 'Popup';Component.prototype = {} Const styles = StyleSheet.create ({popup: {position: 'absolute', zIndex: 99, shadowColor:' # 333), shadowOpacity: 0.12, shadowOffset: {width: 2}, borderRadius: 4,}, triangle: {width: 0, height: 0, marginLeft: 12, borderLeftWidth: 8, borderLeftColor: 'transparent', borderRightWidth: 8, borderRightColor:' transparent', borderBottomWidth: 8 BorderBottomColor: 'white',}, content: {backgroundColor:' white',},}) Export default forwardRef (Component); usage

Insert a Popup element at the end of the page content of the portal file.

/ / App.jsximport Popup from'. / Popup';const App = () = > {return (...);}

Use global variable control.

/ / Show $popup.show (); / / hide $popup.hide (); at this point, the study on "how to implement React Native Popup" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.