react-native-ms

效果图
main

看不到效果图请移步

Install react-native-ms

Using npm:

npm install react-native-ms --save

Usage

Using via import:

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"></TipModal>
                <Button title="loading" onPress={this.loading.bind(this)}></Button>
                <Button title="_success" onPress={this.success.bind(this)}></Button>
                <Button title="_error" onPress={this.error.bind(this)}></Button>
            </View>
        );
    }
}

Props

1.animationType

提示框的出现和消失运动形式 none | fade (default) | slide

none 没有任何运动效果
fade 从屏幕中间隐现

slide 从屏幕地下滑到中间

<TipModal ref="tipModal"
animationType='slide'
></TipModal>

2.successIconComponent

组件有默认的成功提示图片，但是并不能符合所有人要求，使用如下

<TipModal ref="tipModal"
  successIconComponent={
    <Icon 
      color = '#FFFFFF'
      type = 'evilicon'
      name = 'check'
      size = { 30 }
    ></TipModal>
  }
/>

3.errorIconComponent

组件有默认的失败提示图片，但是并不能符合所有人要求，使用如下

<TipModal ref="tipModal"
  errorIconComponent={
    <Icon 
      color = '#FFFFFF'
      type = 'evilicon'
      name = 'close-o'
      size = { 30 }
    ></TipModal>
  }
/>

4.opacity

组件有默认弹出框透明度为0.5，自定义透明度

<TipModal ref="tipModal"
   opacity = { 0.5 }
></TipModal>

ConfirmModal的使用

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"
         animationType='slide'        //弹出框出现消失的运动形式  
　　　　　　　　　　confirmFunc={()=>{alert(1)}}　//确认按钮按下需要执行的操作　　　　　　　
         />
　　　　　　　　<Button title="confirm" onPress={this.confirm.bind(this)}></Button>      
　　　　　　</View>
　　　　);<br>　　
    }
}