2018-08-23 React Native定义一个全局的Toast

前言

在使用react-native-easy-toast库的时候，必须要在组件里面写个标签才能使用，如果你每个页面组件都写的话感觉很麻烦，所以准备定义一个全局toast。

首先说一下我的思路，写一个自己的组件来放在App.js中，然后等待组件ref回调，传给全局变量，如果组件从屏幕上移除将全局静态变量也赋空防止内存泄漏。

安装

命令行运行

  npm i react-native-easy-toast --save

编程

1、创建一个全局的 ToastManager 里面放个静态的toast用来放Toast的ref对象并创建两个方法show，close用于控制显示和隐藏

export default class ToastManager {
    
  static toast;

   /**
   * 显示toast
   * showToast
   * @param text
   * @param duration
   * @param callback
   */
   static show(text, duration, callback) {
       //判断toast对象是否有值才调用show方法
       this.toast && this.toast.show(text, duration, callback);
   }

   /**
   * 关闭toast
   * closeToast
   * @param duration
   */
   static close(duration) {
       //判断toast对象是否有值才调用close方法
       this.toast && this.toast.close(duration);
   }
}

2、创建一个toast组件ToastComponent 继承React.Component 实现render方法，在render方法中实现使用 react-native-easy-toast 的 Toast 组件在ref回调的时候赋值给ToastManager.toast

import React from 'react';

export class ToastComponent extends React.Component {
    //防止内存泄漏
   componentWillUnmount() {
      ToastManager.toast = null;
   }
    
   render() {
       return ( ToastManager.toast = e}/>);
   }
}

3、在App.js中使用我们的ToastComponent组件

import React, {Component} from 'react';

const StackNav= StackNavigator({
   Login: {screen: Login},
});

export default class App extends Component {

     render() {
        return(
           
                {/*...你的代码*/}

                {/*toast*/}
                
           );
      }
}

4、现在你就可以在任意地方调用ToastManager.show('消息消息')或者ToastManager.close()了

小问题

1、react-native-easy-toast会被键盘挡住，因为taost是纯js编写，并只是添加了一个view再使用绝对定位。
2、ToastManager.show频繁调用可能会导致不显示toast，因为toast只是一个view，可能上一个toast要隐藏了你才调用，就会导致不显示。

完整代码

复制此代码新建一个 ToastManager.js，并在你AppRegistry的Component加入即可使用

import React from "react";
import Toast from "react-native-easy-toast";

export default class ToastManager {
    /**
     * 静态toast
     */
    static toast;

    /**
     * 显示toast
     * showToast
     * @param text
     * @param duration
     * @param callback
     */
    static show(text, duration, callback) {
        this.toast && this.toast.show(text, duration, callback);
    }

    /**
     * 关闭toast
     * closeToast
     * @param duration
     */
    static close(duration) {
        this.toast && this.toast.close(duration);
    }

    /**
     * 网络错误
     */
    static netError() {
        this.show('网络错误，请稍后重试！')
    }
}

export class ToastComponent extends React.Component {
    /**
     * 组件被移除的时候
     */
    componentWillUnmount() {
        ToastManager.toast = null;
    }

    render() {
        return ( ToastManager.toast = e}/>);
    }
}