前序

纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验。如:微信、支付宝、ios都有很成熟的一套弹窗UI展示场景。

最近一直沉迷在react-native开发研究中,学习起来发现没有想象的难,不过也采坑了不少。鉴于之前有基于h5和小程序技术开发过自定义弹窗的经验,就想着用react-native技术实现msg信息框|alert提示框|confirm确认框|toast弱提示/loading|仿ios、android弹窗,就有了这个rnPop弹窗组件RN版。

效果图

仿真模拟器上画质有些次,真机实测完美,可忽略这一点

看了上图,是不是觉得调用方式还挺多的,没错,很丰富的应用场景

◆ rnPop弹窗组件目录结构

◆ 引入方式及调用

import RNPop from '../utils/rnPop/rnPop.js'

显示:this.refs.rnPop.show({...options});
隐藏:this.refs.rnPop.hide();
  1. /**
  2. * --------- react-native弹窗演示(普通型弹窗) ---------
  3. */
  4. //msg提示
  5. handlePress01 = ()=> {
  6. let rnPop = this.refs.rnPop
  7. rnPop.show({
  8. anim: 'fadeIn',
  9. content: 'msg消息提示框(5s后窗口关闭)',
  10. shade: true,
  11. shadeClose: false,
  12. time: 5,
  13. xtime: true,
  14. });
  15. }
  16.  
  17. //msg提示(黑色背景)
  18. handlePress02 = ()=> {
  19. let rnPop = this.refs.rnPop
  20. rnPop.show({
  21. content: '自定义弹窗背景',
  22. shade: false,
  23. style: {backgroundColor: 'rgba(17,17,17,.7)', borderRadius: 6},
  24. contentStyle: {color: '#fff', padding: 10},
  25. time: 2
  26. });
  27. }

toast弱提示可自定义loading | success | info | error四种图标

  1. //Toast演示
  2. handlePress15 = ()=> {
  3. let rnPop = this.refs.rnPop
  4. rnPop.show({
  5. skin: 'toast',
  6. content: '操作成功',
  7. icon: 'success', //success | info | error | loading
  8. shade: false,
  9. time: 3
  10. });
  11. }
  1. //ios居中对话框
  2. handlePress17 = ()=> {
  3. let rnPop = this.refs.rnPop
  4. rnPop.show({
  5. skin: 'footer',
  6. position: 'center',
  7. content: '如果您喜欢探鱼,请给我们个好评,也可以直接反馈意见给我们!',
  8. shadeClose: true,
  9.  
  10. btns: [
  11. {
  12. text: '给个好评',
  13. style: {color: '#30a4fc'},
  14. onPress() {
  15. console.log('您点击了给个好评!');
  16.  
  17. //回调函数
  18. rnPop.show({
  19. anim: 'fadeIn',
  20. content: '感谢您的好评,我们会再接再厉!',
  21. shade: true,
  22. time: 3
  23. });
  24. }
  25. },
  26. {
  27. text: '不好用,我要提意见',
  28. style: {color: '#30a4fc'},
  29. onPress() {
  30. // ...
  31. }
  32. },
  33. {
  34. text: '残忍的拒绝',
  35. style: {color: '#30a4fc'},
  36. onPress() {
  37. rnPop.close();
  38. }
  39. }
  40. ]
  41. });
  42. }

  1. /**
  2. * @Title react-native弹窗插件 rnPop-v1.0 beta (UTF-8)
  3. * @Author andy
  4. * @Create 2019/07/30 10:00:50 GMT+0800 (中国标准时间)
  5. * @AboutMe    Q:282310962 wx:xy190310
  6. */
  7.  
  8. 'use strict'
  9.  
  10. import React, {Component} from 'react'
  11. import {
  12. StyleSheet, Dimensions, PixelRatio, TouchableHighlight, Modal, View, Text, Image, ActivityIndicator, Alert
  13. } from 'react-native'
  14.  
  15. const pixel = PixelRatio.get()
  16. const {width, height} = Dimensions.get('window')
  17.  
  18. export default class RNPop extends Component{
  19. /**************************
  20. * 弹窗配置参数
  21. */
  22. static defaultProps = {
  23. isVisible: false, //弹窗显示
  24.  
  25. id: 'rnPop', //弹窗id标识
  26. title: '', //标题
  27. content: '', //内容
  28. style: null, //自定义弹窗样式 {object}
  29. contentStyle: null, //内容样式
  30. skin: '', //自定义弹窗风格
  31. icon: '', //自定义弹窗图标
  32.  
  33. shade: true, //遮罩层
  34. shadeClose: true, //点击遮罩层关闭
  35. opacity: '', //遮罩层透明度
  36. xclose: false, //自定义关闭按钮
  37. time: 0, //弹窗自动关闭秒数
  38. xtime: false, //显示关闭秒数
  39.  
  40. anim: 'scaleIn', //弹窗动画
  41. follow: null, //跟随定位(适用于在长按位置定位弹窗)
  42. position: '', //弹窗位置
  43. zIndex: 9999, //层叠等级
  44.  
  45. btns: null, //弹窗按钮(不设置则不显示按钮)[{...options}, {...options}]
  46. }
  47.  
  48. constructor(props){
  49. super(props)
  50. this.state = { ...this.props }
  51. this.timer = null
  52. }
  53.  
  54. render(){
  55. let opt = this.state
  56.  
  57. // 自定义toast图标
  58. let slotImg = {
  59. success: require('./skin/success.png'),
  60. error: require('./skin/error.png'),
  61. info: require('./skin/info.png'),
  62. }
  63.  
  64. ...
  65.  
  66. }
  67.  
  68. /**************************
  69. * 显示弹窗事件(处理传参)
  70. */
  71. show = (args) => {
  72. this.setState({
  73. ...this.props, ...args, isVisible: true
  74. })
  75. }
  76.  
  77. /**************************
  78. * 关闭弹窗事件
  79. */
  80. close = () => {
  81. console.log('关闭')
  82. this.setState({
  83. ...this.props
  84. })
  85. this.timer && clearTimeout(this.timer)
  86. delete this.timer
  87. }
  88. }

◆ react-native自定义弹窗模板

  1. <Modal transparent={true} visible={opt.isVisible} onRequestClose={this.close}>
  2. <View style={styles.rnpop__ui_panel}>
  3. {/* 遮罩 */}
  4. { opt.shade && <View style={styles.rnpop__ui_mask} onTouchEnd={opt.shadeClose ? this.close : null} /> }
  5. {/* 窗体 */}
  6. <View style={styles.rnpop__ui_main}>
  7. <View style={styles.rnpop__ui_child}>
  8. {/* 标题 */}
  9. { opt.title ? <View style={[styles.rnpop__ui_tit]}><Text style={[styles.rnpop__ui_titxt]}>{opt.title}</Text></View> : null }
  10. {/* 内容 */}
  11. { opt.content ? <View style={[styles.rnpop__ui_cnt]}>
  12. ...
  13. <Text style={[styles.rnpop__ui_cntxt, opt.contentStyle]}>{opt.content}</Text>
  14. </View> : null }
  15. {/* 按钮 */}
  16. <View style={[styles.rnpop__ui_btnwrap]}>
  17. ...
  18. </View>
  19. </View>
  20. </View>
  21. </View>
  22. </Modal>

◆ 附上之前的h5和小程序弹窗

h5手机端弹窗:https://www.cnblogs.com/xiaoyan2017/p/8695783.html

h5网页版弹窗:https://www.cnblogs.com/xiaoyan2017/p/10227798.html

小程序弹窗:https://www.cnblogs.com/xiaoyan2017/p/9976897.html

react-native自定义Modal模态框|仿ios、微信弹窗RN版的更多相关文章

  1. vue 自定义modal 模态框组件

    参数名 类型 说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...

  2. [RN] React Native 自定义 底部 弹出 选择框 实现

    React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...

  3. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  4. React Native 轻松集成分享功能(iOS 篇)

    产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...

  5. [RN] React Native 自定义导航栏随滚动渐变

    React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

  6. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  7. React Native 轻松集成统计功能(iOS 篇)

    最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-n ...

  8. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

  9. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

随机推荐

  1. 《Dotnet9》系列之建站-中文站最好WordPress主题,自媒体,博客,企业,商城主题一网打尽

    大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.本文介绍WordPress主题JustNews,本站Dotnet9既是使用WordPress + JustNews主题搭建而成的 ...

  2. 62-Weave 网络结构分析

    上一节我们安装并创建了 Weave 网络,本节将部署容器并分析网络结构. 在 host1 中运行容器 bbox1: eval $(weave env) docker run --name bbox1 ...

  3. Csharp:HttpWebRequest or HttpClient

    /// <summary> /// Define other methods and classes here /// </summary> /// <param nam ...

  4. Jmeter录制后的脚本调优

    当我们通过badboy或者HTTP代理服务器的方式录制的脚本,会发现脚本杂乱无章,图片.css.html以及各种我们不关心的脚本,因此就需要针对录制后的脚本进行调优 1.去除图片.html/css等不 ...

  5. Python真牛逼,获取压缩文件密码,我只要一分钟!

    事情的经过是这样的: 又是奶茶,行吧行吧. 快点开工,争取李大伟回来之前搞定. 李大伟说是6位数字密码 那么我们可以利用python生成全部的六位数字密码 这样,我们就生成了一个从000000到999 ...

  6. TensorFlow实现简单线性回归示例代码

    # -*- coding: utf-8 -*- import tensorflow as tf import numpy as np import matplotlib.pyplot as plt d ...

  7. 4.Ansible Task控制

    1.tag标签(调试) --skip-tags install_nfs 跳过此标签 -t 指定标签名 [root@manager tasks]# cat task_nfs.yml - hosts: w ...

  8. GBT32960-2016电动汽车远程服务与管理系统技术规范 第3部分:通信协议及数据格式

    电动汽车远程服务与管理系统技术规范 PDF下载地址:https://files.cnblogs.com/files/88223100/GTB32960.zip

  9. 利用 OpenCC 工具进行文字的简繁转换

    前言 近日在公司遇到一个需求,因为准备要推出海外版产品,所以需要将所有的简体文字转换为繁体文字.一开始是改了表面的文字,但是后面发现很多提示语也需要去改,所以找了一个工具去对所有 .m 文件进行批量文 ...

  10. YourSQLDba的共享路径备份遭遇重启问题

    如果YourSQLDba设置过共享路径备份(具体参考博客YourSQLDba设置共享路径备份),有时候服务器重启后,备份就会出错,具体错误信息类似如下所示: Date        2019/9/25 ...