React Native技术篇—创建第二个视图层，自定义Toast弹窗，Loading加载动画，popup弹窗等等

在React Native项目视图层上面在创建一个视图层，主要作用代替原生Modal组件实现一些弹窗、遮罩层等组件，并且可以js调用。下面有使用实例。

注意：未经允许不可私自转载，违者必究

React Native官方文档：https://reactnative.cn/docs/getting-started/

项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

创建视图层

学习前先查看项目结构：https://github.com/zhouwei1994/nativeCase/blob/master/README.md

在项目src/components/common目录下创建 RootView.js

import React, { Component } from "react";
import { StyleSheet, AppRegistry, View, Text } from 'react-native';
import Loading from './Loading';
import Toast from './Toast';
import Popup from './Popup';
const originRegister = AppRegistry.registerComponent;
AppRegistry.registerComponent = (appKey, component) => {
    return originRegister(appKey, function () {
        const OriginAppComponent = component();
        return class extends Component {
            render() {
                return (
                    <View style={styles.container}>
                        <OriginAppComponent />
                        {/* 弹窗 */}
                        <Popup />
                        {/* 提示 */}
                        <Toast />
                        {/* //加载动画 */}
                        <Loading></Loading>
                    </View>
                );
            };
        };
    });
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: 'relative',
    },
});

在src/App.js里面

import React, { Component } from 'react';
import { ToastAndroid, BackHandler, StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import { store, AppWithNavigationState } from './store/index';
//引入创建的RootView文件
import "./components/common/RootView";
export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState/>
      </Provider>
    );
  }
}

使用案例

自定义Toast弹窗

教程：https://blog.csdn.net/weixin_40614372/article/details/86511139

Loading加载动画

教程：https://blog.csdn.net/weixin_40614372/article/details/86511377

popup弹窗

教程：https://blog.csdn.net/weixin_40614372/article/details/86511492

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git