一款基于react-native的弹窗提示组件

介绍一款基于react-native的弹窗提示插件 react-native-ms ,

github地址:https://github.com/jiangzhenfei/RNtips/tree/master

样式图

该组件还支持自己定义的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 }
    />
  }
/>

原文地址:https://www.cnblogs.com/zhenfei-jiang/p/9454352.html

时间: 2024-09-29 21:54:40

一款基于react-native的弹窗提示组件的相关文章

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

基于React Native的Material Design风格的组件库 MRN

基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://github.com/binggg/mrn 示例应用在线演示 https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w 示例应用下载 https://github.com/binggg/MaterialReactNative/blob/master/androi

基于React Native的跨三端应用架构实践

作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能节省大量人力物力. React Native 的推出,为跨平台的开发带来了新的曙光. 虽然 Facebook 官方 blog 的说法 React Native 支持“Learn once, write anywhere.”. 但经过开源社区的不断努力,React Native 已经可以达到“一次编写

React Native 调用原生Android组件

在如今的App中,已经有成千上万的原生UI部件了--其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多.React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件.而且,说不定你曾经为自己以前的App还封装过一些组件,React Native肯定没法包含它们.幸运的是,在React Naitve应用程序中封装和植入已有的组件非常简单. 比如WebView,官方并没有提供Android端的实现,那么我们现

Android React Native使用原生UI组件

Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手封装一下,从而能够使用那些React Native没有为我们封装的原生组件,比如WebView,官方并没有提供Android端的实现,那么我们现在就动手封装一下WebView. 之前写过一篇文章Android React Native使用原生模块,而使用原生UI组件的方法和使用原生模块的方法十分类似

React Native知识5-Touchable类组件

React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件事. 1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果. 2.TouchableOpacity:透明触摸.用户点击时,点击的组件会出现透明效果. 3.TouchableWithoutFeedback:无反馈性触摸.用户点击时无任何视觉效果. 注意:只支持一个子节点,如果

react native 基础按钮的组件

/** * Created by zmis2 on 2016/11/18. */import React,{Component} from 'react';import { Text, View, StyleSheet, TouchableOpacity,} from 'react-native'; export default class Button extends Component { //构造 constructor(props) { super(props); //初始状态 this

React Native 之 定义的组件 (跨文件使用)

哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, 且触摸后的底色.触发事件响应的函数. 图片资源.以及图片大小都是根据传过来的值确定的.(所传递进来的参数决定) ok!!下面我们需要在MyButton.js 这个文件中添加一些原生的控件(组件) import React, { AppRegistry, Component, Image, Touc

React Native之Touchable四组件

一.TouchableHighlight 概念: 本组件用于封装视图,使其可以正确响应触摸操作.当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮. 在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果.譬如没有给视图的backgroundColor显式声明一个不透明的颜色. 注意:TouchableHighlight只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们. r