常用三方库

一. 如何引入三方库

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

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

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

1.常用命令符

#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	一个状态管理库,用于应用内部状态的统一管理

引入react-navigation

2.引入moment

参照以上方式

3.引入ESLint

ESLint引入

4.mobx引入

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

mobx引入

二.开发小技巧

1.webstrom模板文件

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

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

2.如下图

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

/*************************************************************************************************
 * <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,
  },
});