一款基于react-native的弹窗提示组件
介绍一款基于react-native的弹窗提示插件 react-native-ms ,
github地址:https://github.com/jiangzhenfei/react-native-ms
样式图
该组件还支持自己定义的icon组件
主要的使用法法如下
npm下载组件
npm install react-native-ms --save
在页面中使用
import { TipModal } from 'react-native-ms';
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button} from 'react-native'; export default class App extends Component {
/* 打开loading弹出框 */
loading(){
this.refs.tipModal._loading()
}
/* 打开成功提示框,参数一是提示内容,参数二是多少时间自动关闭*/
_success(){
this.refs.tipModal._success('成功了',500)
}
/* 打开失败提示框,参数一是提示内容,参数二是多少时间自动关闭*/
_error(){
this.refs.tipModal._error('失败了',500)
}
render() {
return (
<View style={styles.container}>
<TipModal ref="tipModal"/>
<Button title="loading" onPress={this.loading.bind(this)}/>
<Button title="_success" onPress={this._success.bind(this)}/>
<Button title="_error" onPress={this._error.bind(this)}/>
</View>
);
}
}
修改自定义icon属性,成功提示框自定义icon
<TipModal ref="tipModal"
successIconComponent={
<Icon
color = '#FFFFFF'
type = 'evilicon'
name = 'check'
size = { 30 }
/>
}
/>
失败提示框自定义icon组件
<TipModal ref="tipModal"
errorIconComponent={
<Icon
color = '#FFFFFF'
type = 'evilicon'
name = 'close-o'
size = { 30 }
/>
}
/>
接下来是确认弹窗提示的组件效果
import {Platform, StyleSheet, Text, View,Button} from 'react-native';
import { ConfirmModal } from 'react-native-ms' export default class App extends Component {
confirm(){
this.refs.tipModal2._open('默认的提示')
}
render() {
return (
<View style={styles.container}>
<ConfirmModal ref="tipModal2"
confirmFunc={()=>{alert(1)}}
/>
<Button title="confirm" onPress={this.confirm.bind(this)}/>
</View>
);
}
}
一款基于react-native的弹窗提示组件的更多相关文章
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
- 基于React Native的移动平台研发实践分享
转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基 ...
- [RN] React Native 分享弹窗 ShareAlertDialog
React Native 分享弹窗 ShareAlertDialog ShareAlertDialog.js文件 /** * 分享弹窗 */ import React, {Component} fro ...
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- 基于React Native的跨三端应用架构实践
作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能 ...
- 基于 react 的Java web 应用—— 组件复用(后续需更新)
前言 实习第二周,被告知要用React与导师进行基于React的Javaweb 的开发,jinzhangaaaaa~由于React 这款框架没学过,看了一峰老师的基础入门教程,硬着头皮开始上了... ...
- React Native知识5-Touchable类组件
React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...
随机推荐
- 1."问吧APP"客户需求调查分析
产品名称:问吧 产品功能:实时提问回答和搜索 开发原因:任何人都会遇到问题,网上虽然有很多回答,但是互联网的信息错综复杂,开发这个APP就是为了让网络求助更加的合理有效,清除网络上的垃圾信息. 为知大 ...
- PAT 甲级 1040 Longest Symmetric String
https://pintia.cn/problem-sets/994805342720868352/problems/994805446102073344 Given a string, you ar ...
- 条形码生成库 BarcodeLib
官方介绍 在ASP.NET,Windows,Reporting Service,Crystal Reports 和 RDLC Reports应用程序中轻松生成条形码 生成准确的条形码图像,并可以保存为 ...
- JavaScript 保留两位小数
以下我们将为大家介绍 JavaScript 保留两位小数的实现方法: 四舍五入 以下处理结果会四舍五入: var num =2.446242342; num = num.toFixed(2); // ...
- 【uoj#51】[UR #4]元旦三侠的游戏 博弈论+dp
题目描述 给出 $n$ 和 $m$ ,$m$ 次询问.每次询问给出 $a$ 和 $b$ ,两人轮流选择:将 $a$ 加一或者将 $b$ 加一,但必须保证 $a^b\le n$ ,无法操作者输,问先手是 ...
- 解析php addslashes()与addclashes()函数的区别和比较
一. addslashes() 函数 addslashes(string) 函数在指定的预定义字符前添加反斜杠.这些预定义字符是:•单引号 (')•双引号 (")•反斜杠 (\)•NULL ...
- 分布式文件系统服务器FastDFS
1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制, 充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标, ...
- Day22-CSRF跨站请求伪造
csrf 跨站请求伪造 一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成. 1.1 第1次 ...
- Django 分页 以及自定义分页
Django提供了一个新的类来帮助你管理分页数据,这个类存放在django/core/paginator.py.它可以接收列表.元组或其它可迭代的对象. 基本语法 1 2 3 4 5 6 7 8 9 ...
- 题解 P2762 【太空飞行计划问题】
P2762 太空飞行计划问题 题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,-,Em},和进 ...