修改了App.js，将其放入src-core-app。
文件都存于src文件夹内，src的根目录是cpu。
image.png
C：core，核心，这是项目的核心代码。目前区分为：
1，app（项目初始化的代码）；
2，net（网络请求封装）；
3，route（界面的路由）。
后期项目扩大会新增，比如数据库工具、音视频工具、多语言工具等等，不是很常用，但是非常关键的组件。
P：public，公共，这是项目常用的公共部分代码，目前区分为：
1，command（基本组件的封装，成熟的项目里，这一部分将作为基本组件的替代组件）；
2，dialog（对话框，分为三种：
a，Loading（菊花加载框）；
b，Toast（延时消失提示框）；
c，Alert（和用户交互的对话框）)
3，image（项目图片）。
后期会随着项目深入而新增，比如选择器、指示器等等自行封装的公共常用的组件。
说明：当前有主题设置的参数（theme.js）、其它数据的参数（parameter.js）、用得到的通知名称（notification.js），已分别建立文件，杜绝项目中出现的魔鬼数字和字符串，将统一在这里面控制。
U：ui，UI界面，展示的界面部分。目前界面分为三大板块：线索（clue）、看板（data）、设置（setting），另加上登录（login）界面，分别建立四个文件夹，根据项目深入会在这些子文件夹内新建子文件夹，用以根据界面迅速定位代码。登录之后进入Home界面，Home里面包含以上三大板块。
image.png
深入说明：
1，用户信息存于src-core-app中的UserInfo.js中，包括用户的手机信息和用户登录之后的账户信息，对外提供接口。
2，网络请求：src-core-net中Client.js是网络请求的中枢。其中配置信息config包含请求的IP地址、端口号等等，我们请求的具体地址由后台提供的请求代码控制。如下：
/**
* 请求代码
* @type {{login: string, checkVersion: string, logout: string}}
*/
export const Code = {
login : '20011001',// 登录
checkVersion : '20011011',// 检测版本
logout : '10060004',// 登出（服务代码有改变）
}
网络请求都是POST，提供一个接口：
/**
* 网络请求
* @param serverCode
* @param functionCode
* @param body
* @returns {Promise<any>}
*/
export const lyFetch = ({serverCode='2001', functionCode, body})
functionCode由请求代码来控制，比如Code.login
3，路由。对外提供路由名称：
/**
* 子界面
* @type {{Login: string, Home: string, Alert: string}}
*/
export const routeName = {
Login : 'login',
Home : 'home',
Alert : 'alter',
}
界面跳转的时候使用（比如routeName.Home）即可跳转到相应的界面。
this.props.navigation.navigate(routeName.Home)
下面有每一个子界面的具体设置
/**
* 子界面设置
*/
export const RootStack = createStackNavigator(
……
)
其中包含了界面跳转过程中产生的几个通知，其名称分别在src-public-notification.js中
a，新界面将要加载的通知（viewWillAppear）；
b，旧界面将要消失的通知（viewWillDisAppear）；
c，新界面加载完毕的通知（viewDidAppear）；
d，旧界面已经消失的通知（viewDidDisAppear）；
携带一个参数，即确定属于哪一个界面，参数的判断标准在于路由的routeName中。
举例如下：
componentDidMount() {
this.deEmitter1 = DeviceEventEmitter.addListener(notification.viewDidAppear, (sceneName) => {
if (sceneName === routeName.Alert) {
console.log(sceneName+'已经加载')
}
})
this.deEmitter2 = DeviceEventEmitter.addListener(notification.viewWillDisAppear, (sceneName) => {
if (sceneName === routeName.Alert) {
console.log(sceneName+'将要消失')
}
})
}
componentWillUnmount() {
this.deEmitter1.remove()
this.deEmitter2.remove()
}
在这里就可以控制该界面（routeName.Alert）出现和消失。
说明：如果是侧滑返回上一级，旧界面将不会执行viewWillDisAppear。
4，对话框。三种对话框如下：
import {ly_Toast} from "./ESTToast";
import {ly_Alert} from "./ESTAlert";
import {ly_Loading} from "./ESTLoading";
export {ly_Toast, ly_Alert, ly_Loading}
三种对话框在出现的时候都会屏蔽用户的其它操作。
ly_Toast，延时消失的提示框，可以传入消失之后的动作参数，比如点击清理缓存的时候：
onPress={()=>{
if (this.state.cacheNumber === 0) {
ly_Toast('无须清理')
} else {
ly_Toast('清理成功', () => {
this.setState({
cacheNumber: 0
})
})
}
}}
ly_Alert,，交互对话框，可支持必选（只提供“确定”一个选项选择）和可选（提供“取消”和“确认”）。
ly_Loading，菊花加载框。使用时
ly_Loading('show')，表示调出菊花加载框
ly_Loading('hidden')，表示隐藏菊花加载框
说明：调出菊花加载框，正常情况是要手动来隐藏的，一般用于网络请求开始调出，网络请求结束隐藏。不过这里做了处理，即使没有ly_Loading('hidden')的代码，在超时时间（其值在src-public-parameter.js中控制）以后也会自行隐藏。
网友评论