首先，談一下開(kāi)發(fā)工具，開(kāi)發(fā)工具推薦使用webstorm。但是webstorm是收費(fèi)的，這里我們可以去官網(wǎng)下載早期體驗(yàn)版本，穩(wěn)定性可能有一丟丟不足，但是不影響使用?？梢砸恢笔褂?0天免費(fèi)使用期。然后我們?cè)傧螺d個(gè)語(yǔ)法補(bǔ)全插件ReactNative-LiveTemplate，基本就大功告成了。
ps：我的webstorm打開(kāi)新項(xiàng)目的時(shí)候，不會(huì)自動(dòng)打開(kāi)packager，需要手動(dòng)執(zhí)行react-native start，先開(kāi)起packager，再運(yùn)行。有大神知道什么情況的望告知一下，多謝。

一、項(xiàng)目基本結(jié)構(gòu)

我們?cè)诔跏蓟粋€(gè)rn項(xiàng)目的時(shí)候，是如圖所示：

• __tests__，里邊放的是測(cè)試用例。
• android和ios目錄分別是兩個(gè)平臺(tái)完整的項(xiàng)目環(huán)境。
• .開(kāi)頭的這些文件，都是配置文件：.babelrc，是用于ES6轉(zhuǎn)為ES5的，里邊有一些規(guī)則，這個(gè)以后可能會(huì)需要改，其他的配置文件大多都不用碰。
• App.js，程序的入口。
• package.json，這個(gè)之前的章節(jié)中說(shuō)過(guò)，是第三方庫(kù)的清單。
• app.json貌似還沒(méi)有具體實(shí)現(xiàn)其功能。

二、參考模塊

我們剛開(kāi)始寫(xiě)的時(shí)候，會(huì)發(fā)現(xiàn)我們寫(xiě)的內(nèi)容應(yīng)該怎么分模塊來(lái)放呢，怎么建我們自己的項(xiàng)目結(jié)構(gòu)呢，我們可以參考react-native-starter-kit，這個(gè)項(xiàng)目里給了我們新手一個(gè)很好的參考，如果劃分模塊，如圖：

這個(gè)項(xiàng)目中是這么劃分的，自己寫(xiě)的內(nèi)容都寫(xiě)在了src目錄中。src中分為了：components（組件模塊）、logics（業(yè)務(wù)模塊）、pages（頁(yè)面）、utils（工具模塊）。

二、代碼規(guī)范

那么具體寫(xiě)代碼的時(shí)候的代碼規(guī)范，我們可以參考airbnb的javascript規(guī)范。除了平時(shí)去讀這個(gè)規(guī)范外，我們還可以安裝第三方的插件eslint-config-airbnb，通過(guò)進(jìn)入我們 的項(xiàng)目目錄安裝好之后，還需執(zhí)行npm i --save-dev babel-eslint，用來(lái)轉(zhuǎn)換es6的代碼。最后我們需要新建eslint的配置文件.eslintrc，內(nèi)容直接從這里復(fù)制即可，內(nèi)容如下：

{
  "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
  }
}

簡(jiǎn)要說(shuō)明一下，rules（規(guī)則）中：

• no-undef，表示不允許使用未定義的變量，這里設(shè)為0，表示禁用這個(gè)規(guī)則，即可以使用（如：DEV，SERVER定義在ReactNative源碼中，并不是我們定義的，如果不禁用這個(gè)規(guī)則，則不可以使用）。
• "no-console": 0,"no-alert": 0,激活打印和彈窗。
• indent如上，改為2格縮進(jìn)。
• "plugins": [
  "react", "import"
  ]，表示使用"react", "import"，這兩個(gè)插件包，因?yàn)閑slint本身包括4個(gè)。

好了，就這么多吧，這一篇介紹的內(nèi)容貌似有點(diǎn)水啊，哈，不過(guò)沒(méi)辦法目前就掌握這么多，以后了解了再擴(kuò)充吧。