文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ReactNativePopup实现示例

2024-04-02 19:55

关注

React Native 官方提供了 Modal 组件,但 Modal 是属于全屏的弹出层,当 Modal 显示时,操作区域只有 Modal 里的元素,而且焦点会被 Modal 劫持。虽然移动端不常见,但有些场景还是希望可以用轻量级一点的 Popup

在 React Native 里,元素的层级是不可以被穿透的,子元素无论如何都不能遮挡父元素。所以选择了在顶层添加 Popup,设置绝对定位,显示时根据指定元素来动态调整 Popup 的位置的方案。

具体实现

Popup 会有显示或隐藏两种状态,使用一个 state 来控制。

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

Popup 的 属于视图类组件,UI 结构包括:

由于 Popup 的位置和内容是动态的,所以需要两个 state 存储相关数据。

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

因为是全局的 Popup,所以选择了一个全局变量来提供 Popup 相关的操作方法。

如果全局 Popup 不适用,可以改成在需要时插入 Popup 并使用 ref 来提供操作方法。

目标元素,动态内容和一些相关的可选配置都是在调用 show 方法时通过参数传入的,

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

使用方法

到此这篇关于React Native Popup实现示例的文章就介绍到这了,更多相关React Native Popup内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯