ReactNative——仿微信toast提示

Posted 2022-12-09 TaoLee-

首先看一下微信的带图片的toast 是什么样子的：

没错就是这个样子，不得不说微信的提示窗口还是比较设计的实用+美观的。一个方形带图片和文字的提示窗；

实现之前需要考虑的内容：

1提示组件必须是全局的任何地方都可以调用；
2样式如何实现；

首先看一个开源库react-native-root-siblings

这个库解决了我们要考虑的第一个问题。它可以给root组件添加兄弟组件。这就实现在app 显示之上。

至于样式实现可以通过Modal

代码也很简单
先看一下抽取的组件目录结构

主要代码

import React from 'react';
import RootSibling from 'react-native-root-siblings';
import ToastMessageContainer from './ToastMessageContainer';

let rootSibling = null;

function destroy() 
  if (rootSibling) 
    rootSibling.destroy();
  


export default class ToastMessage 
  static show(msg, isOK) 
    rootSibling = new RootSibling(
      <ToastMessageContainer
        msg=msg
        isOK=isOK
        destroy=() => destroy()
      />);
    return rootSibling;
  

import React from 'react';
import  Image, Text, View, Modal  from 'react-native';
import images from '../../images/index';
import style from '../../styles/index';
import styles from './style';

export default class ToastMessageContainer extends React.Component 
  componentDidMount() 
    setTimeout(() => 
      this.props.destroy();
    , 1000);
  

  render() 
    return (
      <Modal
        animationType='fade'
        transparent
        visible
      >
        <View style=[styles.newModal]>
          <View style=styles.modalContent>
            this.props.isOK === true
                            ?
                              <Image source=images.icons.toastIconOk />
                            :
                              <Image source=images.icons.toastIconFail />
                        
            <Text style=[style.fwh, style.mt20]>this.props.msg</Text>
          </View>
        </View>
      </Modal>
    );
  

通过计时器回调控制显示时间

类似Toast提示，项目中的Loading 和Dialog都可以采取类方式设置全局显示。

除了采用上面的实现方式你也可以这样实现：
在index 里面和路由同级

return (
      <View style=styles.container>
        <AppRoute />
        /*弹出确认框*/
        <AppDialog
          visible=this.state.alertVisible
          title=this.state.alertTitle
          msgContent=this.state.alertMsgContent
          cancelHandle=this.state.alertCancelHandle
          okHandle=this.state.alertOkHandle
          cancelText=this.state.alertCancelText
          okText=this.state.alertOkText
          diaStyle=this.state.alertDiaStyle
        >
          this.state.alertChildren
        </AppDialog>
        /*全局的tip*/
        <AppTip
          modal=false
          text=this.state.isTipText
          visible=this.state.isTipVisible
          onTipDisappear=this._handleTipDisappear/>
        <AppModalLoading/>
      </View>
    );