在 2017 年嘗試 RN 開發是一種怎樣的體驗?

TL.DR

這篇吐槽文是 How it feels to learn JavaScript in 2016 的 RN 版本,並無做指南的意思。javascript


嗨,我準備搞個 side project,想用 React Native 來作。你是咱們這 RN 最專精的老哥,能不能指點一哈?前端

沒問題。

太好了。我剛看了一下 RN 的官網,裝個 node 和 watchman 就能夠了吧?java

你是怎麼裝的 node?

呃,brew install node。node

這可不行,你要先裝 nvm

nvm?react

Node Version Manager。node 是前端圈的產物,這幫傢伙都是瘋子,迭代起來
六親不認。RN 的開發工具鏈深度依賴 node,你一個星期前寫的 demo,更新 node 之後搞很差就跑不了了。
nvm 容許你安裝多個 node 版本,並隨須要切換。你能夠裝一個 lts 版本做爲主力版本,再安裝最新版本跟蹤社區的進度,像這樣git

nvm install lts

有道理。github

接下來用 Yarn 裝 react-native-cli。

Yarn?typescript

新的 node 包管理器,FB出品,必屬精品。徹底兼容現有的 npm 包,命令也差很少。

直接用 npm 不就行了?。shell

Yarn 跑起來更高、更快、更強,你值得擁有。後續用到的其它 npm 包也建議用 Yarn 來管理。

裝好了。
編輯器方面,我如今在用 Sublime Text,能找到的插件對 RN 的支持都很初級,你有什麼推薦嗎?npm

FB 基於 Atom 作了個 RN 的插件—— Nuclide,RN 官方支持。

好,官方支持,我喜歡。

微軟也基於本身的 Visual Studio Code 作了個RN的插件—— vscode-react-native,也很不錯,感受比 FB 的還要穩定一些,微軟作開發工具仍是頗有一套的。並且 VSC 的維護者有開通 微博,吐槽更方便。

喔。。。

說到開發工具,WebStorm 如今也支持 RN 開發了。

喔。。。

還有專門爲 RN 製做的 IDE—— Deco,支持可視化編程,也不錯。

喔。。。

開源的 react-native-debugger 也作得愈來愈好了。

給個痛快。

。。。就 VSC 吧。

看起來不錯嘛,直接支持自動補全。不過靜態檢查好像有問題啊

export default class App extends Component<Props> {
  //...

  square(n) {
    return n * n;
  }

  test() {
    this.square("2")
  }
}

這樣沒有報錯哦。

JS 是弱類型語言,須要類型驗證之類的靜態分析的話,你須要 Flow

讓我猜猜看,FB 出品,必屬精品?

沒錯!你看看你的工程,裏面已經附帶了一個 .flowconfig 文件了吧,拉到最下面,能夠看到這個工程需求的 flow 版本

[version]
^0.65.0

不一樣版本的 react-native-cli 可能會指定不一樣版本的 flow,把 flow 做爲本地包來裝會比較好。固然,要用 Yarn

yarn add flow-bin@0.65.0 --dev

裝好以後,手動跑一下

yarn run flow

就能夠了。

每次都要手動執行?

固然不可能那麼齪。VSC有個 插件 支持 flow,裝好以後設置一下

# Workspace Settings
{
   "javascript.validate.enable": false,
   "flow.pathToFlow": "./node_modules/.bin/flow"
}
# package.json
 "scripts": {
   "start": "node node_modules/react-native/local-cli/cli.js start",
   "test": "jest",
   "flow": "flow"    //加上這行
 },

用起來就和在 Xcode 裏寫 OC 差很少了,look

Flow in VSC

Flow 只是類型檢查嗎?這樣作仍是不會報錯哦

export default class App extends Component<Props> {
  //...

  test() {
  }

  test() {
  }
}
嗯。。。被你發現了。

FB出品,必屬精品?

這個是 JS 的問題啦, JS支持fucntion有相同的名字

那有工具能解決嗎?

有, TypeScript

。。。你肯定這只是個工具?

編程語言也算工具嘛。

只不過是靜態分析,竟然要換語言。。。

別擔憂,沒有聽起來那麼誇張。
大致上,TypeScript 只是爲 JS 加上了數據類型等各類強類型語言的特性,語法什麼的都差很少的。並且,TypeScript 只是一個開發過程當中的概念,實際運行的時候跑的仍是 JS 哦。

就像 OC 那樣,寫的時候是 OC,跑起來其實是 C++?

對!你真聰明,不愧是想要選用 RN 的人。

(我已經有點後悔了。。。) TypeScript 要怎麼弄?

首先你要能在 ts 代碼中使用 React 和 React Native 的代碼。

呃,爲每一個庫中的每一個類型加一個ts中對應的聲明嗎?

差很少是這樣。但不用你親自動手,社區已經有很多吃螃蟹的人了,你直接用就好。

yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native

這個 transformer 是作什麼的?

它負責把ts代碼編譯成js,而後交給 React Native Packager 處理。Packager 自己並不能直接處理 ts 代碼。

Packager?

顧名思義,它會把你的全部 js 文件打包成一個 bundle 丟給設備使用。在引入 TypeScript 以前,它的主要做用是將你的 js 代碼,使用 babel 轉換成設備適用的 js 代碼。。。

等等,babel?

啊,你知道 js 有不一樣的版本吧,ES五、ES6 和 ES7/8 等等,不一樣的設備支持的 js 版本是不一樣的。但在開發時你老是但願固定用一個版本的 js,因此須要有一個工具將你寫的 js 轉換成特定版本的 js,而後才能丟給設備使用。babel 就是這樣的一個工具。

因此在引入 TypeScript 以後。。。

是的,多了一步。你的 ts 代碼要先經過剛纔說的 transformer 編譯成某個版本的 js 代碼,才能交給 React Native Packager 作後續的處理。
整個過程大致來講是這樣的,look

ts to js

真麻煩。。。

作起來很簡單的。在工程根目錄下新建一個 rn-cli.config.js 文件,它是 Packager 的配置文件。

# rn-cli.config.js
module.exports = {
   getTransformModulePath() {
       return require.resolve('react-native-typescript-transformer')
   },
   getSourceExts() {
       return ['ts', 'tsx'];
   }
}

這樣,修改ts代碼也能享受RN的Hot reloading特性。

好吧。我試試看

ts duplicate functions

總算有點寫代碼的感受了。前端開發者們平時的生活都是這麼水深火熱的嗎。。。

理解萬歲,理解萬歲。

如今我能夠開工了吧?

尚未,你只是設置好了靜態環境。若是你如今用 VSC 的 debugger 來嘗試調試,你在 ts 代碼中設置的斷點是無效的哦。

爲何還不行??

你設置的斷點是在 ts 代碼裏,對應到最終生成的 js 代碼時,斷點的位置也要相應發生變化。

說人話。

你要設置 tsconfig.json,讓它把 ts 代碼到 js 代碼的映射關係記錄下來

{
   "compilerOptions": {
     //...
     "sourceRoot": "src",
     "inlineSourceMap": true
   },
}

這樣才能讓斷點正常工做。

好了,環境配好了,你也差很少對整個工具鏈有所瞭解了吧。

說出來你可能不信,在你介紹的時候,我已經用 OC 差很少寫完了。貴圈太亂了,我仍是回去寫 OC 吧。跟 RN 比起來,用 Xcode 寫 Swift 都顯得輕鬆愉快呢。。。

相關文章
相關標籤/搜索