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