最近学习RN有段时间了，自己边学习也变写了一些RN相关小插件，比如这篇我讲到的react-native的toast弹框，自定义alert弹框和loading弹框，可以给初学RN的有需要朋友提供些参考，当然我也是学习别人的，写的不一定很好，请多多指教，先看看效果吧：
弹框效果.gif
其实实现起来并不是很难，
我实现的功能有，和说一下需要注意的地方：
- toast弹框，分三种头部显示，中部显示和底部显示,但是此外我还对键盘做了监听，当键盘弹出的时候，toast依旧可以正常进行中部显示和底部显示而不被键盘遮挡，监听方法很简单,使用RN自带的监听做好监听然后让视图进行偏移就好了:
componentWillMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount() {
this.state.keyboardHeight = 0;
// 在页面生命周期结束时，解除定时器，避免内存泄漏
clearTimeout(this.dismissHandler)
//移除键盘监听
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
//键盘监听事件
_keyboardDidShow =(e) =>{
this.state.keyboardHeight=e.endCoordinates.height;
}
_keyboardDidHide= ()=> {
if(this.state) {
this.state.keyboardHeight = 0;
}
}
- loading弹框也比较简单，主要使用自定义弹出视图和RN提供菊花组件
ActivityIndicator,可参考
强调一点:toast和loading弹框都是用自定弹出背景视图View，它的style属性如下:
container: {
position: "absolute",
width: width,
height: height,
zIndex: 99999,
flexDirection: "row",
justifyContent: "center",
alignItems: 'center',
}
- 自定义
alert弹框就比较麻烦一点了，我这边实现的功能自定义头部视图，内容视图，还有可以添加多个底部button按钮。这里我没有背景弹出视图没有自定义，而是用了RN自带的Modal作为弹出背景视图，这样我是是想可以用modal动画弹出方式，目前有三种 slide，fade，none,Modal参考.
其实第三方RN组件别人写好的很多，但是我们自己实现了可以提升我们自己的能力，增加我们自己的成就感不是吗哈哈。
我的这些弹框具体怎么使用和怎么实现的，有兴趣的话可以看我的Demo,里面写的很详细哦，这里就不多做介绍啦！
思考：每次调用，都要在对应的视图里面加入对应插件视图，比如使用我的toast弹框，就需要在对应页面先加入
<ToastView
onDismiss={() => {
//alert('toast消失了');
}}
ref={(element) => {
this.plToast = element;
}}
/>
然后在调用对应方法this.plToast.show('我是测试toast');，是不是觉得有些麻烦和不方便有没有类似iOS和安卓那种只需要调用方法就行了，插入对应弹框视图由方法内部实现呢,不要我们管呢，比如我的这个toast，需要的时候，能不能调用类似Toast.show('我是测试toast')就行了，这个方法当然有很多了，就留给大家思考，提示:可参考 react-native-root-siblings
