RN（四）--项目基本结构

首先，谈一下开发工具，开发工具推荐使用webstorm。但是webstorm是收费的，这里我们可以去官网下载早期体验版本，稳定性可能有一丢丢不足，但是不影响使用。可以一直使用30天免费使用期。然后我们再下载个语法补全插件ReactNative-LiveTemplate，基本就大功告成了。
ps：我的webstorm打开新项目的时候，不会自动打开packager，需要手动执行react-native start，先开起packager，再运行。有大神知道什么情况的望告知一下，多谢。

一、项目基本结构

我们在初始化一个rn项目的时候，是如图所示：

• __tests__，里边放的是测试用例。
• android和ios目录分别是两个平台完整的项目环境。
• .开头的这些文件，都是配置文件：.babelrc，是用于ES6转为ES5的，里边有一些规则，这个以后可能会需要改，其他的配置文件大多都不用碰。
• App.js，程序的入口。
• package.json，这个之前的章节中说过，是第三方库的清单。
• app.json貌似还没有具体实现其功能。

二、参考模块

我们刚开始写的时候，会发现我们写的内容应该怎么分模块来放呢，怎么建我们自己的项目结构呢，我们可以参考react-native-starter-kit，这个项目里给了我们新手一个很好的参考，如果划分模块，如图：

这个项目中是这么划分的，自己写的内容都写在了src目录中。src中分为了：components（组件模块）、logics（业务模块）、pages（页面）、utils（工具模块）。

二、代码规范

那么具体写代码的时候的代码规范，我们可以参考airbnb的javascript规范。除了平时去读这个规范外，我们还可以安装第三方的插件eslint-config-airbnb，通过进入我们 的项目目录安装好之后，还需执行npm i --save-dev babel-eslint，用来转换es6的代码。最后我们需要新建eslint的配置文件.eslintrc，内容直接从这里复制即可，内容如下：

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    // Disable for __DEV__, __SERVER__ usage.
    "no-undef" : 0,

    // Disable for console/alert
    "no-console": 0,
    "no-alert": 0,

    "indent": [2, 2, {"SwitchCase": 1}]
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    }
  },
  "globals": {
    "__DEV__": true
  }
}

简要说明一下，rules（规则）中：

• no-undef，表示不允许使用未定义的变量，这里设为0，表示禁用这个规则，即可以使用（如：DEV，SERVER定义在ReactNative源码中，并不是我们定义的，如果不禁用这个规则，则不可以使用）。
• "no-console": 0,"no-alert": 0,激活打印和弹窗。
• indent如上，改为2格缩进。
• "plugins": [
  "react", "import"
  ]，表示使用"react", "import"，这两个插件包，因为eslint本身包括4个。

好了，就这么多吧，这一篇介绍的内容貌似有点水啊，哈，不过没办法目前就掌握这么多，以后了解了再扩充吧。