一款基於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>
　　　　);
　　}
}