目录
2.react-native-easy-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
感想:其他公用组件很多都可以参考这种方式,降低代码冗余;