給大家安利一款可以在ios和android上通用的Toast組件: react-native-root-toast
現(xiàn)在開源的Toast組件一大堆挡爵，為什么要選用這個(gè)呢？原因如下：
- 純
javascript解決方案零酪，免去了原生安裝的各種繁雜步驟，直接一行npm install react-native-root-toast --save搞定 - 同時(shí)兼容
iOS和Android拇勃，使用完全一致的接口四苇，不用再為同時(shí)兼容兩個(gè)平臺(tái)再寫額外的代碼 - 可以自定義
toast的各類屬性（顯示時(shí)間、位置方咆、延時(shí)月腋、動(dòng)畫、陰影等） - 同時(shí)支持兩種調(diào)用形式（可以使用
API調(diào)用瓣赂，也可以作為Component直接放在render里面進(jìn)行控制）
安裝
npm install [React](http://lib.csdn.net/base/react)-native-root-toast --save
搞定榆骚！
使用
可以支持兩種不同的調(diào)用方式.
如果你喜歡API方式的調(diào)用
import Toast from 'react-native-root-toast'; // 引入類庫
// 通過調(diào)用 Toast.show(message, options); 可以在屏幕上顯示一個(gè)toast，并返回一個(gè)toast實(shí)例
let toast = Toast.show('This is a message', {
duration: Toast.durations.LONG, // toast顯示時(shí)長
position: Toast.positions.BOTTOM, // toast位置
shadow: true, // toast是否出現(xiàn)陰影
animation: true, // toast顯示/隱藏的時(shí)候是否需要使用動(dòng)畫過渡
hideOnPress: true, // 是否可以通過點(diǎn)擊事件對(duì)toast進(jìn)行隱藏
delay: 0, // toast顯示的延時(shí)
onShow: () => {
// toast出現(xiàn)回調(diào)（動(dòng)畫開始時(shí)）
},
onShown: () => {
// toast出現(xiàn)回調(diào)（動(dòng)畫結(jié)束時(shí)）
},
onHide: () => {
// toast隱藏回調(diào)（動(dòng)畫開始時(shí)）
},
onHidden: () => {
// toast隱藏回調(diào)（動(dòng)畫結(jié)束時(shí)）
}
});
// 也可以通過調(diào)用Toast.hide(toast); 手動(dòng)隱藏toast實(shí)例
setTimeout(function () {
Toast.hide(toast);
}, 500);
你也可以通過react組件方式調(diào)用Toast.
在render里面加入<Toast />組件煌集，并通過visible屬性對(duì)Toast進(jìn)行控制.
<Toast />的屬性和API調(diào)用時(shí)傳入的選項(xiàng)相同.toast內(nèi)容添加在元素內(nèi)部:<Toast>message</Toast>
注意：通過組件方式調(diào)用的toast妓肢，在<Toast />組件 componentWillUnmount 的時(shí)候會(huì)自動(dòng)消失
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>;
}
}
報(bào)錯(cuò) 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
