react-native 配置全局loading，弹框，以及toast组件

react-native 配置全局loading，弹框，以及toast组件

1. 下载安装events

npm i events -S

2.在src目录新建文件，src/utils/events.js,并写入以下代码

// 这是events.js
import { EventEmitter } from 'events';
const Events = new EventEmitter();

// loading
function ld () {
    Events.emit("loading", true)
}
function cld () {
    Events.emit("loading", false)
}
// toast
function toast (text) {
    Events.emit("toast", text)
}
// 弹框
function box (options) {
    Events.emit("modal", options)
}

global.$ld = ld;
global.$cld = cld;
global.$toast = toast;
global.$box = box;

export default Events;

3. 在src新建目录文件，src/components/Loading.js(/Modal.js，/Toast.js)

// loading.js
import React from 'react';
import { ActivityIndicator, StyleSheet, Dimensions } from 'react-native';
import Events from '@/utils/events';

const { width, height } = Dimensions.get('window');

export default class ActivityIndicator1 extends React.Component {
    constructor () {
        super();
        this.state = {
            loading: false
        }
    }
    componentDidMount () {
        Events.addListener("loading",this._loading)
    }
    _loading = (bl) => {
        this.setState({
            loading: bl,
        })
    }
    render () {
        return (
            <ActivityIndicator animating={this.state.loading} size="large" color="#0000ff" style={[styles.loading,{zIndex: this.state.loading ? 10 : -1}]} />
        )
    }
}

const styles = StyleSheet.create({
    loading: {
        position: "absolute",
        width,
        height,
        backgroundColor: "rgba(0,0,0,0.4)",
    }
})

// (Modal.js)弹窗
import React from 'react';
import { View, Text, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native';
import Events from '@/utils/events';

const { width, height } = Dimensions.get('window');
export default class ActivityIndicator1 extends React.Component {
    constructor () {
        super();
        this.state = {
            modalVisible: false,
            modalOptions: {}
        }
    }
    componentDidMount () {
        Events.addListener("modal",this._modal)
    }
    _modal = (options) => {
        this.setState({
            modalVisible: true,
            modalOptions: options
        })
    }
    render () {
        return (
            <Modal
                visible={this.state.modalVisible}
                onRequestClose={() => {}}
                transparent={true}
                animationType="fade"
                >
                <View style={styles.modal}>
                    <View style={styles.content}>
                        <Text style={styles.tips}>{this.state.modalOptions.text}</Text>
                        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
                            <TouchableOpacity onPress={() => {
                                this.setState({
                                    modalVisible: false,
                                    modalOptions: {}
                                })
                            }} style={[styles.btns,{borderRightColor: "#eee", borderRightWidth: 1}]}>
                                <Text style={styles.btnsText}>取消</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                this.setState({
                                    modalVisible: false,
                                    modalOptions: {}
                                })
                                this.state.modalOptions.callback();
                            }} style={styles.btns}>
                                <Text style={styles.btnsText}>确定</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    modal: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    content: {
        width: width * 0.5,
        minHeight: height * 0.12,
        paddingTop: 10,
        borderRadius: 4,
        backgroundColor: "#fff",
        fontSize: 16
    },
    tips: {
        fontSize: 16,
        lineHeight: 20,
        minHeight: 60,
        borderBottomWidth: 1,
        borderBottomColor: "#eee",
        textAlign: "center",
        padding: 10
    },
    btns: {
        textAlign: "center",
        height: 40,
        flex: 1
    },
    btnsText: {
        textAlign: "center",
        lineHeight: 40,
        fontSize: 16,
        color: "blue"
    }
})

// toast.js
import React from 'react';
import { View, Text, Modal, StyleSheet } from 'react-native';
import Events from '@/utils/events';
export default class ActivityIndicator1 extends React.Component {
    constructor () {
        super();
        this.state = {
            modalVisible: false,
            toastText: ''
        }
    }
    componentDidMount () {
        Events.addListener("toast",this._toast)
    }
    _toast = (text) => {
        this.setState({
            modalVisible: true,
            toastText: text
        }, () => {
            setTimeout(() => {
                this.setState({
                    modalVisible: false,
                    toastText: ''
                })
            }, 2000)
        })
    }
    render () {
        return (
            <Modal
                visible={this.state.modalVisible}
                onRequestClose={() => {}}
                transparent={true}
                animationType="fade"
                >
                <View style={styles.modal}>
                    <View style={styles.content}>
                        <Text>{this.state.toastText}</Text>
                    </View>
                </View>
            </Modal>
        )
    }
}

const styles = StyleSheet.create({
    modal: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
    content: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 20,
        paddingRight: 20,
        borderRadius: 4,
        backgroundColor: "#fff",
        fontSize: 16
    }
})

4. 在文件主入口(App.js)引入每个模块

import 'react-native-gesture-handler';
import React from 'react';
import Routes from '@/router'
import { View, StyleSheet } from 'react-native';
// 只看此处
import Loading from './components/Loading';
import Toast from './components/Toast';
import Modal from './components/Modal';

export default class AppPage extends React.Component {
    render () {
        return (
            <View style={styles.app}>
                <Loading />
                <Toast />
                <Modal />
                <Routes />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    app: {
        position: "relative",
        backgroundColor: "#000",
        flex: 1
    }
})

5. 最后就可以全局使用了

global.$ld() //使用loading
global.$cld() //关闭loading
global.$toast('提示信息') // toast提示
global.$box({
	text: '提示信息', // 弹框提示信息(我设置的字段是text)
	callback: () => {console.log('我点击了确定按钮')} //确定按钮要做的事件
}) // 弹框提示