我的GitHub
0%

RN分享二

常用三方库

一. 如何引入三方库

上次分享我们讲到我们使用npm或者yarn进行管理

我们建议使用yarn进行管理,原因上节课也说过了,有下面几点

1
2
3
4
5
1.Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,我们写的RN是Facebook开源的,我们当然要用匹配的东西
2.npm很慢,因为是安装完一个package再安装下一个;yarn是并行安装,并且会生成离线库,安装过的库第二次安装都是从缓存的离线库读取,速度很快
3.yarn安装版本统一.存在yarn.lock文件去管理每个库的版本统一
4.yarn能对多注册来源进行处理:所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。
5.…………

1.常用命令符

1
2
3
4
5
6
7
8
9
#xxxx代表库名
#1.安装package.json中已经存在的库
yarn
#2.新增一个库
yarn add xxxx
#3.新增一个库到开发依赖
yarn add xxxx --dev
#4.移除一个库
yarn remove xxxx

附赠一个yarn的中文社区文档

二.常用三方库列表

三方库名称 描述
react-navigation 是RN上较为优秀的路由管理库,几乎可以说是项目必备的路由管理框架
moment 一个前端应该非常熟悉的时间库,用于前端的时间解析之类的
ESLint 一个前端应该非常熟悉格式规范库,用于规范代码编写
mobx 一个状态管理库,用于应用内部状态的统一管理

1.react-navigation

引入react-navigation

2.引入moment

参照以上方式

3.引入ESLint

ESLint引入

4.mobx引入

只讲引入,使用放到第三次分享讲,下面链接中的使用并不是最佳实践,未更新,只看引入方面

mobx引入

二.开发小技巧

1.webstrom模板文件

新建文件的时候,肯定会有一些默认必须的东西,我们可以进行如下操作.

1.webstrom-Preferences-Editor-File and Code Templates

2.如下图

如图

我给出一份默认View的模板,大家也可以自己替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/*************************************************************************************************
* <pre>
* @项目名称: ${PROJECT_NAME}
* @版权所有:
*
*
* @类描述:
* @版本:
* @作者: ${USER}
* @邮箱:
* @创建时间: ${YEAR}-${MONTH}-${DAY} ${TIME}
*
* @修改记录:
-----------------------------------------------------------------------------------------------
----------- 时间 | 修改人 | 修改的方法 | 修改描述 ---------------
-----------------------------------------------------------------------------------------------
</pre>
************************************************************************************************/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
} from 'react-native';

export class ${NAME} extends Component {
constructor(props) {
super(props)
}

componentDidMount() {

}
render() {
return (
<View style={${NAME}Styles.container}>
<Text>${NAME}</Text>
</View>
);
}
}

let ${NAME}Styles = StyleSheet.create({
container: {
flex: 1,
},
});

这样,新建一个文件,就会包含这些默认代码了,不需要自己再写了.

2.webstrom的RN代码提示

写代码的时候肯定需要代码提示,RN的代码提示可以通过以下方式添加

1.webstrom | Preferences | Languages & Frameworks | JavaScript | Libraries

如图

我们需要点击右边你的down(此处可能需要翻墙,懂我意思吧)

然后添加如下两个库

1
2
@types/react
@types/react-native

3.webstrom代码块

有些代码块是经常会使用到的,比如我们在一个js文件中可能会拼写一些在本页面用到的基础组件,新建的class是必不可少的

我们可以采取代码块的方式完成这些(当然,dash的代码块也是可以的,而且可能更好用)

1.webstrom | Preferences | Editor | Live Templates

如图
如图

我们可以使用这种方式添加代码块,效果如下

效果图

4.webstrom上eslint格式化快捷

点击这里

5.iOS利用xcode查看层级

使用xcode运行项目查看页面层级

层级查看

6.iOS查看项目中使用AsyncStorage存储的数据

模拟器:打印沙盒路径直接查看

真机:五.RN持久化

7.mock平台搭建,帮助前端开发者先行

mock

8.Charles的使用

建议百度

我是阿星,阿星的阿,阿星的星!