React Native Popup实现示例

更新时间：2022年05月18日 11:19:46 作者：KidLau

本文主要介绍了React Native 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react native仿微信PopupWindow效果的实例代码

一文带你搞懂React的函数组件
React中函数式组件的基本意义是,组件实际上是一个函数,不是类,下面就来给大家介绍一下关于React中函数组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
React组件三大属性之state,props,refs
这篇文章主要介绍了React组件三大属性之state,props,refs,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
React通过hook实现封装表格常用功能
这篇文章主要为大家详细介绍了React通过hook封装表格常用功能的使用,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
2023-12-12
React中的JSX { }的使用详解
这篇文章主要介绍了React中的JSX{ }的使用,React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求，对React JSX使用感兴趣的朋友一起看看吧
2022-08-08
基于react框架使用的一些细节要点的思考
下面小编就为大家带来一篇基于react框架使用的一些细节要点的思考。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
React-View-UI组件库封装Loading加载中源码
这篇文章主要介绍了React-View-UI组件库封装Loading加载样式,主要包括组件介绍，组件源码及组件测试源码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
React中使用react-player 播放视频或直播的方法
这篇文章主要介绍了React中使用react-player 播放视频或直播，本文教大家如何使用react框架及创建实例的代码,本文内容简短给大家介绍的非常详细，需要的朋友可以参考下
2022-01-01
Input标签自动校验功能去除实现
这篇文章主要为大家介绍了Input标签的自动拼写检查功能去除实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
react 可拖拽进度条的实现
本文主要介绍了react 可拖拽进度条的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
聊聊ant design charts 获取后端接口数据展示问题
今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示，这篇文章主要介绍了ant design charts 获取后端接口数据展示,需要的朋友可以参考下
2022-05-05