React Native 是大臉書出品的一個移動開發(fā)框架, 可以用前端的技術, 寫出 Android iOS 原生的效果和性能, 地圖, 傳感器等相關的 API 也都經(jīng)過封裝, 可以用 JS 調(diào)用
- RN 是用前端技術來寫的, 所以 npm 中的 百萬 + 庫都可以使用
- 不過 UI 方面的庫不是很完善, 所以最好會 Android 或者 iOS 的原生開發(fā), 而且很多第三方的服務, 比如分享, 第三方登錄, 廣告 等等都需要用原生的技術封裝暴露給 JS
- 所以現(xiàn)階段用純 RN 寫跨平臺項目還是很難實現(xiàn)的
- 這個界面就是用 RN 實現(xiàn)的, 根本看不出來和其它原生頁面的區(qū)別,
-
附近的老師右側(cè)的3個圓圈, 是 Swift 的原生 View, 然后暴露給 JS 使用 - 如果 React 很 6 的話, 實現(xiàn)起來確實很快快捷, 不過點擊之后的各種操作處理可能會比較復雜, 后面我們來說巧妙的解決辦法.
Getting Started
由于 RN 發(fā)展和 版本迭代的速度很快, 所以學習 RN 首要參考的就是官方文檔
- 安裝 RN 有 2 種情況,
- 從 0 開始純 RN 項目
- 已有的 OC Swift 項目 接入 RN
第一種情況 :
你需要 react-community/create-react-native-app, 和 Expo 的幫助, 它們倆能幫助你脫離 Android Studio 和 Xcode 進行編譯, 打包, 發(fā)布應用
第二種情況 :
隨著 Integration With Existing Apps 的指導就可以了, 需要你稍微了解一點 npm , 也就是 JS 版的 Cocoapods
接下來
前端這兩年真的是一直在搞事情, ES 6, React, Vue, Node js ==, 簡直是顛覆式的發(fā)展
下面是幾個不錯的資源, 幫助你了解 ES 6 等標準的發(fā)展
ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？「譯」
ECMAScript-6-features
Babel : Learn ES2015
阮一峰 : ECMAScript 6 入門
建議先把官方文檔的 The Basic 看完, 你就會大概對 RN 有個了解了
剩下的就是熟悉 Component 和 強行寫 React 的代碼了
FlexBox 布局
- FlexBox 和 AutoLayout 的差別還是很多的, 有點像 Android
LinearLayout或者StackView的升級版, 不過學習成本很低 - 我在使用過程中, 除了發(fā)現(xiàn), 偶爾需要多加一層不必要的 Container View 來調(diào)整布局之外, 沒有什么明顯的缺點
幾篇 FlexBox 的教程, 學習難度很低
Layout with Flexbox
Understanding React Native flexbox layout
A Complete Guide to Flexbox
熱更新
CodePush 是大微軟出品的, 適用于 RN 的熱更新解決方案, 是一個 好用, 免費的熱更新平臺
Debug 時 調(diào)試 CodePush 是否生效, 可以再 didLoadFinish 加入 RCTSetLogThreshold(.trace), 然后插線連接 Mac, 用 Console 過濾 Codepush 看日志
原生接口暴露給 JS
這個問題可以簡單的分為兩種,
- 原生的方法暴露給 JS 調(diào)用
- 原生的 UIView 暴露給 JS 調(diào)用
由于 RN 的迭代速度很快, 所以首要參考的就是 官方文檔, 索性文檔寫的很棒棒哦...
Swift 和 OC 的都有相關的文檔, 原生的 Swift UI 可以參考 pure-swift-views-react-native
許多原生的 API 封裝, 被分成 XXXiOS , XXXAndroid, 這些是平臺的特殊實現(xiàn), 我們也可以找一些第三方的, 跨平臺的實現(xiàn)
最后
我的個人項目的其中一個頁面, 用 RN 試水, 效果不錯, 就是文章開頭的截圖,
RN 是一個潛力很大的項目, 今后希望能更多的接觸 RN,
關于原生和 JS 調(diào)用方法, 跳轉(zhuǎn)界面
- 比較 Trick 的實現(xiàn)是, 全都使用 Router, 比如 點擊 RN 的一個按鈕, 觸發(fā)
sixue://userDetail/666這個 router, 含義是查看到用戶 id 為666的詳情界面 - 這樣逼迫你把所有的 ViewContoller 寫的更模塊化更獨立, 然后按鈕觸發(fā)的效果也可以在后臺動態(tài)的修改, 所有 RN 端的事件處理都用 router 轉(zhuǎn)到 Native 端接收并處理
- 這樣大部分的 UI 界面都可以用 RN 跨屏臺的書寫完成, 提高了效率
