20.React Native常用功能系列一-toast通知使用和封装；

目录

1.react-native-easy-toast组件介绍

2.react-native-easy-toast组件的具体使用

2.1在App.js中封装toast组件

3.toast完整代码

---

在移动端常用的通知消息采用采用toast通知的方式；

1.react-native-easy-toast组件介绍

官网地址：https://www.npmjs.com/package/react-native-easy-toast

安装和使用方法：

a.运行下面的代码安装react-native-easy-toast组件

npm i react-native-easy-toast --save
b.代码中导入toast组件

import Toast, {DURATION} from 'react-native-easy-toast'

2.react-native-easy-toast组件的具体使用

2.1在App.js中封装toast组件

a.在App.js中添加Toast组件-即在最外层View底部渲染Toast

render() {
        {/*<Toast ref="toast" opacity={0.8}/>*/}
        return (<View style={{flex:1}}>
            <SimpleApp/>
            <Toast ref="toast" opacity={0.8}/>
        </View>);
    }

b.定义全局的toast方法

//将App组件中的this赋给全局的self
let self;
//所有子页面均可直接调用global.toast("")来吐司提示消息
global.toast = false;

c.封装在toast全局方法

componentDidMount() {
        //封装全局方法
        self = this;
        global.toast = function(message) {
            self.refs.toast.show(message);
        };
    }

d.调用

在其他界面可以非常简单的

global.toast('提示消息'); //调用，其他页面不需要额外应用其他内容，只需要这么调用

3.toast完整代码

//将App组件中的this赋给全局的self
let self;
//所有子页面均可直接调用global.toast("")来吐司提示消息
global.toast = false;

export default class App extends Component {

    constructor(props){
        super(props);
    }

    render() {
        {/*<Toast ref="toast" opacity={0.8}/>*/}
        return (<View style={{flex:1}}>
            <SimpleApp/>
            <Toast ref="toast" opacity={0.8}/>
        </View>);
    }

    componentDidMount() {
        //封装全局方法
        self = this;
        global.toast = function(message) {
            self.refs.toast.show(message);
        };
    }
};

4.toast样式

样式调整参考官网即可：https://www.npmjs.com/package/react-native-easy-toast

 

感想：其他公用组件很多都可以参考这种方式，降低代码冗余；

 

参考：https://blog.csdn.net/klo220/article/details/80493780