React?Native?Popup怎么實(shí)現(xiàn)

這篇文章主要介紹“React Native Popup怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在React Native Popup怎么實(shí)現(xiàn)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React Native Popup怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

React Native 官方提供了 Modal 組件，但 Modal 是屬于全屏的彈出層，當(dāng) Modal 顯示時(shí)，操作區(qū)域只有 Modal 里的元素，而且焦點(diǎn)會(huì)被 Modal 劫持。雖然移動(dòng)端不常見，但有些場景還是希望可以用輕量級(jí)一點(diǎn)的 Popup。

在 React Native 里，元素的層級(jí)是不可以被穿透的，子元素?zé)o論如何都不能遮擋父元素。所以選擇了在頂層添加 Popup，設(shè)置絕對定位，顯示時(shí)根據(jù)指定元素來動(dòng)態(tài)調(diào)整 Popup 的位置的方案。

具體實(shí)現(xiàn)

Popup 會(huì)有顯示或隱藏兩種狀態(tài)，使用一個(gè) state 來控制。

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

Popup 的 屬于視圖類組件，UI 結(jié)構(gòu)包括：

• 一個(gè)作為容器的 View，由于 iOS 有劉海，所以在 iOS 上需要使用 SafeAreaView 來避免被劉海遮擋。同時(shí)添加一個(gè)點(diǎn)擊事件監(jiān)聽當(dāng)點(diǎn)擊時(shí)關(guān)閉 Popup 。

• 一個(gè)指向目標(biāo)對象的三角形。

• 一個(gè)包裹內(nèi)容的 View。

由于 Popup 的位置和內(nèi)容是動(dòng)態(tài)的，所以需要兩個(gè) state 存儲(chǔ)相關(guān)數(shù)據(jù)。

• 一個(gè)存儲(chǔ)位置相關(guān)的 CSS。

• 一個(gè)存儲(chǔ)動(dòng)態(tài)內(nèi)容。

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,
            },
          },
          <TouchableOpacity onPress={onPress}>
            <View style={styles.triangle} />
            <View style={{ ...styles.content, ...style }} {...other}>
              {content}
            </View>
          </TouchableOpacity>,
        )}
    </>
  );
};

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',
  },
});

因?yàn)槭侨值?Popup，所以選擇了一個(gè)全局變量來提供 Popup 相關(guān)的操作方法。

如果全局 Popup 不適用，可以改成在需要時(shí)插入 Popup 并使用 ref 來提供操作方法。

目標(biāo)元素，動(dòng)態(tài)內(nèi)容和一些相關(guān)的可選配置都是在調(diào)用 show 方法時(shí)通過參數(shù)傳入的，

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);
    },
  };
}, []);

完整代碼

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,
            },
          },
          <TouchableOpacity onPress={onPress}>
            <View style={styles.triangle} />
            <View style={{ ...styles.content, ...style }} {...other}>
              {content}
            </View>
          </TouchableOpacity>,
        )}
    </>
  );
};

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

使用方法

• 在入口文件頁面內(nèi)容的末尾插入 Popup 元素。

  // App.jsx
  import Popup from './Popup';
  
  const App = () => {
    return (
      <>
        ...
        <Popup />
      </>
    );
  };

• 使用全局變量控制。

  // 顯示
  $popup.show();
  // 隱藏
  $popup.hide();

到此，關(guān)于“React Native Popup怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！