react-native自定义Modal、Dialog弹窗|RN原生android/ios弹窗
前段时间就有使用react开发过一些项目,发现react框架有些意思,当初就想着要学习下原生Native技术,最近空闲就一直在研究react-native技术,采坑了不少。一顿学习下来发现没有想象的难。
react聊天室IM:https://www.cnblogs.com/xiaoyan2017/p/11062316.html
import RNPop from '../utils/rnPop/rnPop.js' <View style={styles.container}> {/* 引入弹窗模板 */} <RNPop ref="rnPop" /> ... </View> 显示:this.refs.rnPop.show({...options}); 隐藏:this.refs.rnPop.hide();
/** * @Title react-native弹窗插件 rnPop-v1.0 beta (UTF-8) * @Author andy * @Create 2019/07/30 10:00:50 GMT+0800 (中国标准时间) * @AboutMe Q:282310962 wx:xy190310 */ 'use strict' import React, {Component} from 'react' import { StyleSheet, Dimensions, PixelRatio, TouchableHighlight, Modal, View, Text, Image, ActivityIndicator, Alert } from 'react-native' const pixel = PixelRatio.get() const {width, height} = Dimensions.get('window') export default class RNPop extends Component{ /************************** * 弹窗配置参数 */ static defaultProps = { isVisible: false, //弹窗显示 id: 'rnPop', //弹窗id标识 title: '', //标题 content: '', //内容 style: null, //自定义弹窗样式 {object} contentStyle: null, //内容样式 skin: '', //自定义弹窗风格 icon: '', //自定义弹窗图标 shade: true, //遮罩层 shadeClose: true, //点击遮罩层关闭 opacity: '', //遮罩层透明度 xclose: false, //自定义关闭按钮 time: 0, //弹窗自动关闭秒数 xtime: false, //显示关闭秒数 anim: 'scaleIn', //弹窗动画 follow: null, //跟随定位(适用于在长按位置定位弹窗) position: '', //弹窗位置 zIndex: 9999, //层叠等级 btns: null, //弹窗按钮(不设置则不显示按钮)[{...options}, {...options}] } ... }
自定义Toast提示,可自定义icon图标(success | info | error | loading)
//Toast演示 handlePress15 = ()=> { let rnPop = this.refs.rnPop rnPop.show({ skin: 'toast', content: '操作成功', icon: 'success', //success | info | error | loading shade: false, time: 3 }); }
//msg提示 handlePress01 = ()=> { let rnPop = this.refs.rnPop rnPop.show({ anim: 'fadeIn', content: 'msg消息提示框(5s后窗口关闭)', shade: true, shadeClose: false, time: 5, xtime: true, }); } //msg提示(黑色背景) handlePress02 = ()=> { let rnPop = this.refs.rnPop rnPop.show({ content: '自定义弹窗背景', shade: false, style: {backgroundColor: 'rgba(17,17,17,.7)', borderRadius: 6}, contentStyle: {color: '#fff', padding: 10}, time: 2 }); }
// android 样式 handlePress20 = ()=>{ let rnPop = this.refs.rnPop rnPop.show({ skin: 'android', title: '发现新版本', content: '程序员GG紧急修复了一个闪退bug,给您带来的不便敬请谅解。\n\n[近期更新]\n 1、新增资讯&话题入口 \n 2、新增详情页面长按分享功能', shadeClose: false, btns: [ { text: '知道了', onPress() { rnPop.close(); console.log("知道了"); } }, { text: '更新', style: {color: '#4eca33'}, onPress() { console.log('您点击了更新!'); } } ] }); }
//ios对话框 handlePress17 = ()=> { let rnPop = this.refs.rnPop rnPop.show({ skin: 'footer', position: 'center', content: '如果您喜欢探鱼,请给我们个好评,也可以直接反馈意见给我们!', shadeClose: true, btns: [ { text: '给个好评', style: {color: '#30a4fc'}, onPress() { console.log('您点击了给个好评!'); //回调函数 rnPop.show({ anim: 'fadeIn', content: '感谢您的好评,我们会再接再厉!', shade: true, time: 3 }); } }, { text: '不好用,我要提意见', style: {color: '#30a4fc'}, onPress() { // ... } }, { text: '残忍的拒绝', style: {color: '#30a4fc'}, onPress() { rnPop.close(); } } ] }); }
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Android开发进阶——自定义View的使用及其原理探索
Android开发进阶——自定义View的使用及其原理探索在Android开发中,系统提供给我们的UI控件是有限的,当我们需要使用一些特殊的控件的时候,只靠系统提供的控件,可能无法达到我们想要的效果,这时,就需要我们自定义一些控件,来完成我们想要的效果了。下面,我就来讲讲自定义控件的那些事。 首先,我来讲讲Android的控件架构。Android的控件可以被分为两类,分别是ViewGroup和View。在ViewGroup中可以包含多个View,并且管理他们。控件树就是有这两个部分组成的,控件树的上层负责的是下层控件的绘制和测量以及交互。我们在Activity中使用的findViewById()方法,就是在控件树中用深度遍历的方法搜索到对应的ID的。每一颗控件树的顶部,都有个ViewParent对象,他是整棵树的核心,负责调度所有的交互事件。在Activity中,我们是使用setContentView()来加载布局的。每个Activity都是包含着一个Window对象的,在Android中通常是PhoneWindow,他将一个DecorView作为整个窗口的根View,将要显示的内容呈...
- 下一篇
Android 组件化最佳实践 ARetrofit 原理
本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/TXFt7ymgQXLJyBOJL8F6xg 作者:朱壹飞 ARetrofit 是一款针对Android组件之间通信的路由框架,实现快速组件化开发的利器。本文主要讲述 ARetrofit 实现的原理。 简介 ARetrofit 是一款针对Android组件之间通信的路由框架,实现快速组件化开发的利器。 源码链接:https://github.com/yifei8/ARetrofit 组件化架构 APP Demo, ARetrofit 使用实例:https://github.com/yifei8/HappyNote 组件化 Android组件化已经不是一个新鲜的概念了,出来了已经有很长一段时间了,大家可以自行Google,可以看到一堆相关的文章。 简单的来说,所谓的组件就是Android Studio中的Module,每一个Module都遵循高内聚的原则,通过ARetrofit 来实现无耦合的代码结构,如下图: 每一个 Module 可单独作为一个 project 运行,而打包到整体时 Mo...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- 2048小游戏-低调大师作品
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Mario游戏-低调大师作品
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)