react-native入門實戰小結

時間 2019-11-08

原文原文鏈接

本文原創：fengyiyijavascript

嘮叨兩句

在公司提效的大背景下，今年6月初，部門的國際化新項目咱們經過多方面的對比，技術選型採用react-native爲最終的方案，之因此沒有采用目前比較火的Flutter。其中的緣由我會在如下小節有個簡要的說明。項目初版已接近尾聲，到了最後的細節調整階段。正好藉此機會記錄下這段時間入坑RN的一些心得體會。css

心得體會

入坑3月有餘，幸而有咱們前端同窗的加持，使咱們在第一次使用新技術棧的同時開發如此大規模的項目，得以保證開發進度的順利進行。html

在整個項目中使用到的語言包括TypeScript/JavaScript/Ojbective-C/Java，項目管理、打包、構建工具包括npm/cocoapods/gradle/webpack，至於開發工具方面我更喜歡WebStorm+AndroidStudio+AppCode組合，能夠保證開發體驗高度一致，開發速度會更快，固然Xcode必不可少。而前端同窗更喜歡VSCode，都是能夠的。前端

react-native來實現項目中全部的業務邏輯，開發速度天然快了許多，使我這個同時開發過iOS和Android項目的人深深體會到了跨平臺的好處，不再會出現一樣的功能在iOS側和Android側實現兩遍並且實現思路還不同的尷尬場面，在維護時的痛苦不言而喻。java

因爲項目中會用到前端及移動端等須要不一樣路線的、獨立的技術棧，有幸咱們小組同時具備各自領域擅長的同窗，得以在整個開發過程當中都能hold住各個模塊，爲了讓前端同窗在不須要了解移動端不少知識的前提下能夠正常、穩定的運行、調試項目，咱們在項目初期編寫了大量的npm腳本命令來實現一鍵自動化功能，好比啓動react-native服務，運行、構建、打包、安裝iOS和Android App等命令。使前端同窗能夠快速地專一於開發、調試。打包提測速度也有很大的改善。node

技術選型

都9102年了，爲何還選react-native？當時五、6月份作選型的時候，也作了不少方面的對比。固然，最後對比主要仍是關注在react-native和Flutter的選擇上。因爲項目大，人員又比較少，因此想經過跨平臺的技術來提效是一個大前提，不少能達到跨平臺效果的框架咱們都作了總體的調研，好比ionic、weex、hybrid等等，不過爲了追求原生般的用戶體驗，這些方案都被pass掉了。至於react-native和Flutter的選擇，前端之巔公衆號在8月中旬發佈這篇文章《爲何Flutter還不是最成熟的跨端框架》裏面的觀點很入個人法眼。react

重點關注如下幾點：android

開發語言：JS or Dart？因爲本次項目比較急，排期又是倒排，爲了保證項目的進度，選擇團隊中熟悉的技術語言JS會更可靠。
成熟度：很明顯react-native的生態要比Flutter要好得多、成熟得多，單從issue來看，框架自己react-native也要穩定不少，並且第三方庫也要多不少。
熱更新支持：目前Flutter官方仍是不支持熱更新，並且也沒有相關的計劃表。
WEB平臺支持：Flutter在5月初的1.5版本剛支持到WEB平臺，還不夠成熟，沒法在生產環境中使用。

以上幾點是保證項目能順利上線的優先考慮點，至於Flutter的優點、趨勢及將來發展倒不是本次選型的關鍵和重點。webpack

環境搭建

官方的環境搭建文檔已經有詳細的說明，這裏再也不重複。你們能夠看下我本地的環境配置版本，目前整個項目運行穩定，能夠借鑑。git

$ react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 259.21 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.1 - /usr/local/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 6.10.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.0, 28.0.2, 28.0.3
        System Images: android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5692245
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.10 => 0.59.10 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
複製代碼

值得一說的是，react-native庫使用的是0.59.10，0.59的最後一個版本，相信0.60版本後Android側引入的新JS引擎，對App的性能有更多的提高。咱們後續在適當的機會也會作相應的升級。還有，每一個開發的cocoapods包管理工具最好也要保持一致，目前咱們統一使用1.7.2版本，不然，每次pod install都會引發Podfile.lock文件的變化，容易代碼衝突。

另外，本項目採用的開發語言爲TypeScript，並無採用JavaScript。TypeScript中增長了靜態類型、類、模塊、接口和類型註解等等，對咱們移動開發者經常使用的面嚮對象語言OC/Java都很友好，上手更加容易、更易理解，並且其面向對象編程語言的結構保持了代碼的清潔、一致和簡單的調試，在應對大型開發項目時，使用TypeScript更加合適。

經常使用組件&第三方庫

經常使用的官方組件我這裏不一一介紹，你們能夠直接看官方文檔，官方文檔永遠是最新最可靠的。

如下所列是咱們項目中目前使用到的第三方庫，能幫助咱們更好、更快地開發和構建項目。有興趣的同窗能夠點開了解一下，相信有不少庫都是大多數項目中離不開的，好比導航庫react-navigation、狀態管理庫mobx/redux等等。

代碼規範

這點比較有意思的是，咱們前端同窗之前更多瞭解的是JS，而咱們此次選用的開發語言是TS，其實仍是有不少不一樣的。好比最簡單的類型定義，習慣了OC/Java的同窗天然是對JS那種無類型的語言深惡痛絕，而JS那種無類型的寫法也不是TS的最佳實踐，因此坦白來說，咱們小組基本沒有什麼經驗來規範TS如何寫纔是最優雅的。

此次選用TS的一個核心訴求也是爲了其靜態類型化功能，能幫助咱們編寫更健壯的代碼、更好的協做。既然本身沒有經驗，不如拿來主義，如下兩個是比較官方的兩例。以爲不錯，能夠先試用之。

react-native項目中須要掌握的技術棧

如下的知識點是我我的從移動端開發到react-native開發，入門時學過和參考過的一些文檔和資料。供你們入坑參考。

iOS/Android - Objective-C/Swift/Java/Kotlin
- 原生開發基礎，涉及太多知識，這裏暫不列舉
JS/TS - ES2015/ES6
React - JavaScript/JSX語法/HTML/CSS
ReactNative - React
【進階】MobX/Redux - 狀態管理、組件間的通訊
Node/NPM - 項目、包管理
- 暫無
熱更新
- CodePush
其餘

小結

從目前來看，react-native的成熟、穩定徹底能夠支撐起一個商業型的項目，開發期間雖然經歷了各類各樣的坑和奇怪的問題，可是在官方文檔、stackoverflow以及對具體問題的分析，最後都能獲得可行的解決方案。借用公衆號那句話，目前階段，react-native纔是業內最成熟的跨端框架。歡迎你們一塊兒入坑學習~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。