init new project

前言

最近要开始写一个新的项目，算是将之前的项目做个总结。把有缺陷的地方进行修改，没有引入的组件引入，算是做一个提炼总结，把之前没有办法修改的问题一一修正。

创建项目

我这里使用的是官方提供的react-native-cli即

1	react-native init newProject --version 0.57.0

新项目当然是使用最新版本了，react-native从低版本向上升级真的是痛苦。

创建完新的项目之后当然是建立目录结构，目录结构确实是对项目有很大的影响。总之结合之前的项目经验，构建了如下的目录结构，当然其他的也没有问题，这里打算使用Mobx，所以将相关Mobx逻辑代码直接命名了Mobx文件夹。

可以是很基础的目录结构，看文件夹名字就可以知道它的功能了。

在正式开始敲代码前还需要做以下准备工作。

eslint

eslint是airbnb公司推出的代码规范插件，为编写代码提供标准

运行

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"

)

还需要安装babel-eslint

1	npm install babel-eslint --save-dev

创建.eslintrc文件，可以将你需要的规则写在这个文件当中。

之后在package.json中的scripts中添加eslint执行命令

1	"lint": "eslint --ext .js src/"

这个命令即为检查src文件夹下所有的js文件，eslint的命令行参数有很多，具体可以查看eslint配置

执行npm run lint即可验证该命令是否已经正确配置，如果有任何不符合eslint的规范的地方会在命令行中提示。也可以在上述的.eslintrc文件中修改eslint内置的规则，以符合具体的场景需求。

如果希望在src文件夹内，有些文件跳过这些规则的检查，可以在根目录下创建.eslintignore文件，将路径写入其中，eslint就会自动跳过这些文件。

至此eslint的添加、引用以及配置都已经设置完毕，配合使用的编辑器中的插件会在日常输入代码的时候提示开发者符合eslint的规范。但是各个编译器的插件功能不同，有时并不会很准确的提示。所以在命令行中执行eslint的命令才能的到真正的检查结果。

为了避免忘记执行该命令，将不规范的代码提交到远程仓库，我们引入git的hook，它会在每次commit前调用配置中的命令，利用这个hook我们在每次提交前都执行一次eslint命令确保每次提交代码的规范性。

1	npm install pre-commit --save-dev

如果你不希望此次提交被检查，可以使用-n来跳过hook

并在package.json中加入

1
2
3

"pre-commit":[
	"eslint"
]

flow

flow是JavaScript 代码的静态类型检查工具，它能够捕获 JavaScript 代码中的常见问题，如静态类型转换不匹配、空指针引用等问题。同时，Flow 还为 JavaScript 新增了类型语法，如类型别名。

安装

1	npm install --save-dev flow-bin

创建配置文件。

1	touch .flowconfig

先不管空白的*.flowconfig配置文件。在package.json*文件里flow脚本。
your project/package.json

1
2
3

"scripts": {
  "flow": "flow; test $? -eq 0 -o $? -eq 2",
},

然后给需要flow检查的文件里加上//@flow或者/*@flow*/。然后就可以检查了。（也可以在命令中加上–all，这样就会检查所有文件）。

在根目录下运行命令：

1	npm run flow

以上就配置好了flow，下面写一个简单的小例子来说明flow是如何运行的。

const plus = (a: number, b: number) => {
    return a + b;
}

plus(10, 2);

其实也就是和平常写法没什么区别，只是在定义参数的时候要添加该参数的数据类型。如果传入非法的数据类型，flow则会报错。flow在多人开发中还是十分有效果的，如果不想使用typescript，那么js+flow也是不错的选择。flow当然还有很多其他的用法，这里就不一一介绍了。

mobx

上一个项目中使用的就是mobx，总体来说使用起来十分简单。对于App的流畅性也有很大的提升。

安装

需要的依赖关系：mobx和mobx-react

1	npm i mobx mobx-react --save

我们还需要安装一个babel插件，以便我们可以使用ES7装饰器：

1	npm i babel-plugin-transform-decorators-legacy --save-dev

现在，让我们创建一个.babelrc文件来配置我们的插件：

{
  "presets": ["react-native"],
  // 主要这两句话
  "plugins": ["transform-decorators-legacy"]
}

自RN 0.56版本之后，react-native默认支持bable7，之前的写法都不对了。

首先，需要安装下面的4个babel库

@babel/core
@babel/plugin-proposal-decorators
@babel/plugin-transform-runtime
@babel/runtime

将.babelrn修改为如下

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/transform-runtime", {
      "helpers": true,
      "regenerator": false
    }]
  ]
}

react-navigation 3.x与之前版本有较大区别

1	npm install react-navigation --save

在新版本中新增了一个原生库react-native-gesture-handler如果没有安装，按如下方式安装

1 2	npm install react-native-gesture-handler --save react-native link react-native-gesture-handler

创建路由

之前使用的是StackNavigator来创建路由，在3.x中使用createStackNavigator并且需要由createAppContainer包裹起来

`react-navigation 1.x`
const Navigator = StackNavigator({
    Home: {screen: Home}
},{
    
});
export default Navigator;

`react-navigation 3.x`
const Navigator = createStackNavigator({
    Home: {screen: Home}
},{
    
});
export default createAppContainer(Navigator);

以上，同理TabNavigator修改为createBottomTabNavigator

总之react-navigation 3.x与之前版本有较大出入，更多详情请看react-navigation官网

Axios

react-native中自带了fetch请求API，由于fetch中有很多功能不好实现，就选择axios做为网络请求库。axios起码可以设置请求超时时间，fetch的话只能使用promise.race()间接实现请求超时的功能。

安装

1	npm install axios

使用

axios和fetch在使用起来没有什么差别

`get请求`
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

`post请求`
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

当然axios还有很多配置选项，比如请求超时时间、设置请求头、配置代理、配置相应头等等，这些都可以在axios中文文档中查看

总结

新建一个项目需要多方面的考虑，这里只是写出我习惯用到的一些框架。后续肯定还有别的需求添加，但是大体上都是一些UI方面的功能性的东西，总体的项目框架已经搭建好了。这个也算是之前项目的一个总结吧。

以上

参考文献

react-navigation使用技巧（再进阶）

mahaaoo