在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