react-native-root-toast的使用

給大家安利一款可以在ios和android上通用的Toast元件: react-native-root-toast
現在開源的Toast元件一大堆，為什麼要選用這個呢？原因如下：

• 純javascript解決方案，免去了原生安裝的各種繁雜步驟，直接一行npm install react-native-root-toast --save搞定
• 同時相容iOS和Android，使用完全一致的介面，不用再為同時相容兩個平臺再寫額外的程式碼
• 可以自定義toast的各類屬性（顯示時間、位置、延時、動畫、陰影等）
• 同時支援兩種呼叫形式（可以使用API呼叫，也可以作為Component直接放在render裡面進行控制）

安裝

npm install [React](http://lib.csdn.net/base/react)-native-root-toast --save

搞定！

使用

可以支援兩種不同的呼叫方式.

如果你喜歡API方式的呼叫

import Toast from 'react-native-root-toast'; // 引入類庫

// 通過呼叫 Toast.show(message, options); 可以在螢幕上顯示一個toast，並返回一個toast例項
let toast = Toast.show('This is a message', {
    duration: Toast.durations.LONG, // toast顯示時長
    position: Toast.positions.BOTTOM, // toast位置
    shadow: true, // toast是否出現陰影
    animation: true, // toast顯示/隱藏的時候是否需要使用動畫過渡
    hideOnPress: true, // 是否可以通過點選事件對toast進行隱藏
    delay: 0, // toast顯示的延時
    onShow: () => { 
        // toast出現回撥（動畫開始時）
    },
    onShown: () => {
        // toast出現回撥（動畫結束時）
    },
    onHide: () => {
        // toast隱藏回撥（動畫開始時）
    },
    onHidden: () => {
        // toast隱藏回撥（動畫結束時）
    }
});

// 也可以通過呼叫Toast.hide(toast); 手動隱藏toast例項
setTimeout(function () {
    Toast.hide(toast);
}, 500);

你也可以通過react元件方式呼叫Toast.
在render裡面加入<Toast />元件，並通過visible屬性對Toast進行控制.
<Toast />的屬性和API呼叫時傳入的選項相同.toast內容新增在元素內部:<Toast>message</Toast>

注意：通過元件方式呼叫的toast，在<Toast />元件 componentWillUnmount 的時候會自動消失

import React, {Component} from 'react-native';
import Toast from 'react-native-root-toast';

class Example extends Component{
    constructor() {
        super(...arguments);
        this.state = {
            visible: false
        };
    }

    componentDidMount() {
        setTimeout(() => this.setState({
            visible: true
        }), 2000); // show toast after 2s

        setTimeout(() => this.setState({
            visible: false
        }), 5000); // hide toast after 5s
    };

    render() {
        return <Toast
            visible={this.state.visible}
            position={50}
            shadow={false}
            animation={false}
            hideOnPress={true}
        >This is a message</Toast>;
    }
}

報錯 null is not an object(evaluting '_this._root_setNativeProps')

修改方法：
在原始檔lib/ToastContainer.js中改下程式碼

componentWillUnmount = () => {
   this._root&&this._hide();
};

參考：
http://blog.csdn.net/sinat_17775997/article/details/60954255
https://github.com/magicismight/react-native-root-toast/issues/24