扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ReactNativePopup实现示例
  • 883

0
分享到

ReactNativePopup实现示例

2024-04-02 19:04:59 883人浏览 八月长安
摘要

目录具体实现使用方法React Native 官方提供了 Modal 组件，但 Modal 是属于全屏的弹出层，当 Modal 显示时，操作区域只有 Modal 里的元素，而且焦点会

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 结构包括：

  • 一个作为容器的 View，由于 iOS 有刘海，所以在 ioS 上需要使用 SafeAreaView 来避免被刘海遮挡。同时添加一个点击事件监听当点击时关闭 Popup 。
  • 一个指向目标对象的三角形。
  • 一个包裹内容的 View。

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

  • 一个存储位置相关的 CSS。
  • 一个存储动态内容。
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);

使用方法

  • 在入口文件页面内容的末尾插入 Popup 元素。

    // App.jsx
import Popup from './Popup';

const App = () => {
  return (
    <>
      ...
      <Popup />
    </>
  );
};

  • 使用全局变量控制。

    // 显示
$popup.show();
// 隐藏
$popup.hide();

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

--结束END--

本文标题: ReactNativePopup实现示例

本文链接: https://lsjlt.com/news/149070.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • ReactNativePopup实现示例
    目录具体实现使用方法React Native 官方提供了 Modal 组件，但 Modal 是属于全屏的弹出层，当 Modal 显示时，操作区域只有 Modal 里的元素，而且焦点会...
    99+
    2024-04-02
  • goRWMutex的实现示例
    目录OverviewRWMutex 的结构LockUnlockRLockRUnlockQ1: 多个协程并发拿读锁，如何保证这些读锁协程都不会被阻塞？Q2: 多个协程并发拿写锁，如何保...
    99+
    2024-04-02
  • Pygame显示文字的实现示例
    目录1 Pygame的初始化2 屏幕的创建3 字体的创建4 字体的渲染5 文字的显示使用Pygame显示文字的步骤如图1所示。 图1 显示文字的步骤 1 Pygame的初始化 通过...
    99+
    2023-02-14
    Pygame显示文字 Pygame显示
  • Android实现实时通信示例
    我们今天来聊下如何做实时通讯（先给知识点，实现原理，最后给出实现实时通信的具体代码--使用工具 android studio） 现在先说下用到的知识点： java的sock...
    99+
    2022-06-06
    示例 通信 Android
  • Monaco Editor实现sql和java代码提示实现示例
    目录monaco editor创建sql提示（库表字段关联）java自定义联想monaco editor创建 //创建和设置值 if (!this.monacoEditor) { ...
    99+
    2022-11-13
    Monaco Editor代码提示 sql java代码提示
  • c++ 对数器实现示例
    目录对数器的作用对数器的实现代码完整代码对数器的作用 对数器用于在自己的本地平台验证算法正确性，用于算法调试，无需online judge。 好处： 没找到线上测试的onl...
    99+
    2024-04-02
  • C++实现堆排序示例
    目录堆的实现 Heap.h 堆的管理及接口Heap.c 堆各个接口功能的实现 test.c测试堆的实现 Heap.h 堆的管理及接口 #include<stdio.h&g...
    99+
    2024-04-02
  • JavaScript实现消息框示例
    在JavaScript 中可以创建三种消息框：警告框、确认框、提示框。 警告框 警告框通常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法...
    99+
    2024-04-02
  • Django点赞的实现示例
    目录1.前期准备2.html实现3.js实现【！！！注意这段代码写在for循环之内】4.css实现1.前期准备 用户models.py class User(models.Model...
    99+
    2024-04-02
  • go colly 爬虫实现示例
    正文 贡献某CC，go源码爬虫一个，基于colly，效果是根据输入的浏览器cookie及excel必要行列号，从excel中读取公司名称，查询公司法人及电话号码。并写回到excel中...
    99+
    2024-04-02
  • gomockserver的简易实现示例
    目录前言代码步骤1步骤2步骤3步骤4最终效果最后前言 学习golang也一段时间了，看了一些书，上周又看了一本入门级的《Go语言趣学指南》，是时候检验成果了。 目的：通过读取本地mo...
    99+
    2024-04-02
  • 实现Ajax的示例分析
    小编给大家分享一下实现Ajax的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Ajax:  Asynchron...
    99+
    2024-04-02
  • Dockerrocketmq部署的实现示例
    目录准备工作部署过程初体验 rocketmq相关问题帮助文档最近学习使用 rocketmq，需要搭建 rocketmq 服务端，本文主要记录 rocketmq 搭建过程以及这个过程踩...
    99+
    2024-04-02
  • react Scheduler 实现示例教程
    目录正文简单的css动画etTimeout来实现循环处理具体思路正文 最近在看react源码，react构建fiber树这一块逻辑还比较好理解，但是一旦涉及到任务调度相关的逻辑，看起...
    99+
    2024-04-02
  • CSS实现3d特效的演示示例
    小编给大家分享一下CSS实现3d特效的演示示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！图像转换与THREE.js 结合使用...
    99+
    2024-04-02
  • vue实现列表展示示例详解
    目录Vue 的CSS之deep语法::v-deepclassPrefix 前缀给元素绑定class总结Object.freeze关于Vue和ts的配合问题ISO8601和dayjs库...
    99+
    2024-04-02
  • Go+Kafka实现延迟消息的实现示例
    目录前言原理简单的实现生产者延迟服务消费者改进点通用的延迟服务生产者负责延迟服务总结前言 延迟队列是一个非常有用的工具，我们经常遇到需要使用延迟队列的场景，比如延迟通知，订单关闭等等...
    99+
    2024-04-02
  • Go简单实现协程池的实现示例
    目录MPG模型通道的特性首先就是进程、线程、协程讲解老三样。 进程: 本质上是一个独立执行的程序，进程是操作系统进行资源分配和调度的基本概念，操作系统进行资源分配和调度的一...
    99+
    2024-04-02
  • vue3超出文本展示eltooltip实现示例
    目录实现思路1. 创建一个自定义指令文件showTip.js。该文件放在directives文件夹下。内容如下：2. 全局引入3. 组件中使用总结实现思路 最近在做项目的时候遇到一...
    99+
    2023-02-27
    vue 超出文本展示el tooltip vue el tooltip
  • C++操作MySQL的实现示例
    Windows版本：       将libmysql.dll、libmysql.lib、mysql.h复制粘贴到项目文件中，或者项目设置里的包含目录和库目录添加路径...
    99+
    2022-05-20
    C++操作MySQL C++ MySQL
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作