国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iOS原生混合RN開發最佳實踐

B0B0 / 3014人閱讀

摘要:交流群也定期更新最新的學習資料給大家,謝謝大家支持小伙伴們掃下方二維碼加入技術交流群

iOS原生混合RN開發詳解

</>復制代碼

  1. 做過原生iOS開發或者Android開發的同學們肯定也都了解Hybrid,有一些Hybrid的開發經驗,目前我們企業開發中運用最廣泛的Hybrid App技術就是原生與H5 hybrid,在早期的時候,可能部分同學也接觸過PhoneGap等hybrid技術,今天我們就簡單來聊下一種比較新的Hybrid技術方案,原生App與ReactNativie Hybrid,如果有同學們對React Native技術不熟悉的同學,可以查看作者簡書中對React Native基礎的講解:React Native入門到實戰講解
示例Demo地址

初級Demo示例

高級Demo示例

具體步驟

創建一個iOS原生項目

將iOS原生項目支持pod

調整目前項目工程的文件夾結構

添加RN依賴相關文件

安裝React Native

修改Podfile文件,原生安裝React Native依賴庫

在iOS原生頁面填加RN頁面入口

修改RN入口文件 index.ios.js

執行npm start 運行項目

創建一個iOS原生項目

</>復制代碼

  1. 使用Xcode創建一個空的項目,這個應該不用多說了

項目支持pod

</>復制代碼

  1. 這一操作步驟同樣也很簡單,我們只需要執行下面的幾條命令即可,如果對cocoapods 安裝使用不熟悉的同學請參照作者簡書

創建podfile文件,我們在有xcodeproj文件的同級目錄下執行下面命令,這時我們的項目文件中就多了一個Podfile文件

</>復制代碼

  1. $ pod init

執行pod install 命令來安裝pod,同樣,這個命令也是在有xcodeproj同級目錄下,安裝完成后,我們的項目多了一個

</>復制代碼

  1. $ pod install

注意: 這里對原生iOS不熟悉的同學們需要注意了,當我們使用pod來作為庫管理工具,后面我們打開項目運行,我們就需要打開上圖所示的xcworkspace文件了

調整目前項目工程的文件夾結構

</>復制代碼

  1. 這里對文件夾做結構調整是為了后期更好的將Android原始項目也使用RN Hybrid,使iOS和Android共享一份React Native框架,共享同一份JS文件,調整的后的文件夾結構如下

添加RN依賴相關文件

</>復制代碼

  1. 到這里,我們原生的iOS項目目錄結構已近調整完畢,后面我們需要處理的都是RN相關的內容了,這里需要創建的文件有點多,大家可以直接將示例Demo中的這幾個文件直接拖到自己的項目中,然后在做修改即可

首先我們需要創建package.json文件

創建index.ios.js文件

創建index.android.js文件

創建bundle文件夾,注意這個文件夾是后面我們接入CodePush熱更新時使用的

安裝React Native

</>復制代碼

  1. 安裝React Native這個也很簡單,我們也是簡單的執行下面的命令即可,注意:執行npm 系列的命令,我們都需要在項目根目錄(有package.json文件的目錄)下執行

</>復制代碼

  1. $ npm install

package.json文件內容如下

</>復制代碼

  1. {
  2. "name": "iOSHybridRNDemo",
  3. "version": "0.0.1",
  4. "private": true,
  5. "scripts": {
  6. "start": "node node_modules/react-native/local-cli/cli.js start"
  7. },
  8. "dependencies": {
  9. "prop-types": "^15.6.1",
  10. "react": "16.0.0",
  11. "react-native": "0.50.3",
  12. "react-native-code-push": "^5.2.2",
  13. "react-native-root-toast": "^1.3.0",
  14. "react-native-router-flux": "^4.0.0-beta.24",
  15. "react-native-simple-store": "^1.3.0",
  16. "react-native-storage": "^0.2.2",
  17. "react-native-vector-icons": "^4.3.0",
  18. "react-redux": "^5.0.6",
  19. "redux": "^3.7.2",
  20. "redux-actions": "^2.2.1",
  21. "redux-promise-middleware": "^4.4.1",
  22. "redux-thunk": "^2.2.0"
  23. },
  24. "devDependencies": {
  25. "babel-jest": "22.4.1",
  26. "babel-preset-react-native": "4.0.0",
  27. "jest": "22.4.2",
  28. "react-test-renderer": "16.0.0"
  29. },
  30. "jest": {
  31. "preset": "react-native"
  32. }
  33. }

注意:因為我們項目中使用到了react-native-vector-icons 這個iconFont組件需要依賴原生,所以我們執行完 npm install 之后,我們還需要 再執行一個 react-native link react-native-vector-icons 命令來安裝原生依賴

</>復制代碼

  1. $ react-native link react-native-vector-icons

當我們執行完npm install 命令之后,我們再打開項目目錄,發現多了一個 node_modules 文件夾,這個文件夾就是我們安裝的React Native所有的依賴庫

修改Podfile文件,原生安裝React Native依賴庫

</>復制代碼

  1. 后面我們都是使用Pod來管理原生的依賴庫,安裝React Native依賴庫,我們只需要將下面的Podfile文件中的內容添加進去,執行 pod install 安裝即可

Podfile文件

</>復制代碼

  1. # Uncomment the next line to define a global platform for your project
  2. platform :ios, "9.0"
  3. # Uncomment the next line if you"re using Swift or would like to use dynamic frameworks
  4. # use_frameworks!
  5. target "iOSHybridRNDemo" do
  6. # Pods for iOSHybridRNDemo
  7. #***********************************************************************#
  8. # "node_modules"目錄一般位于根目錄中
  9. # 但是如果你的結構不同,那你就要根據實際路徑修改下面的`:path`
  10. pod "React", :path => "../node_modules/react-native", :subspecs => [
  11. "Core",
  12. "RCTText",
  13. "RCTImage",
  14. "RCTActionSheet",
  15. "RCTGeolocation",
  16. "RCTNetwork",
  17. "RCTSettings",
  18. "RCTVibration",
  19. "BatchedBridge",
  20. "RCTWebSocket",
  21. "ART",
  22. "RCTAnimation",
  23. "RCTBlob",
  24. "RCTCameraRoll",
  25. "RCTPushNotification",
  26. "RCTLinkingIOS",
  27. "DevSupport"
  28. # 在這里繼續添加你所需要的模塊
  29. ]
  30. # 如果你的RN版本 >= 0.42.0,請加入下面這行
  31. pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  32. #***********************************************************************#
  33. pod "RNVectorIcons", :path => "../node_modules/react-native-vector-icons"
  34. end

注意: #*************************# 中間的內容是我們需要添加的RN依賴庫,后面我們所有pod 相關的命令,我們都需要iOS根目錄(有Podfile文件的目錄)下執行

執行安裝命令

</>復制代碼

  1. $ pod install

在iOS原生頁面填加RN頁面入口

</>復制代碼

  1. 現在我就來實現從原生頁面跳RN頁面

使用RN提供一個View視圖代碼如下

</>復制代碼

  1. NSURL * jsCodeLocation;
  2. #ifdef DEBUG
  3. NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
  4. jsCodeLocation = [NSURL URLWithString:strUrl];
  5. #else
  6. jsCodeLocation = [CodePush bundleURL];
  7. #endif
  8. NSDictionary *params = @{@"componentName":@"MeApp1", @"args":@{@"params":@"這是原生傳遞的參數"}};
  9. RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
  10. moduleName:@"iOSRN"
  11. initialProperties:params
  12. launchOptions:nil];
  13. self.view = rootView;
修改RN入口文件 index.ios.js

</>復制代碼

  1. 修改RN頁面的入口文件,這里當是iOS入口我們修改index.ios.js文件,當Android入口,我們修改index.android.js文件

index.ios.js文件

</>復制代碼

  1. import React, {Component} from "react"
  2. import {
  3. Platform,
  4. StyleSheet,
  5. Text,
  6. View,
  7. AppRegistry
  8. } from "react-native";
  9. const instructions = Platform.select({
  10. ios: "Press Cmd+R to reload,
  11. " +
  12. "Cmd+D or shake for dev menu",
  13. android: "Double tap R on your keyboard to reload,
  14. " +
  15. "Shake or press menu button for dev menu",
  16. });
  17. type Props = {};
  18. export default class App extends Component {
  19. render() {
  20. return (
  21. Welcome to React Native!
  22. To get started, edit App.js
  23. {instructions}
  24. );
  25. }
  26. }
  27. const styles = StyleSheet.create({
  28. container: {
  29. flex: 1,
  30. justifyContent: "center",
  31. alignItems: "center",
  32. backgroundColor: "#F5FCFF",
  33. },
  34. welcome: {
  35. fontSize: 20,
  36. textAlign: "center",
  37. margin: 10,
  38. },
  39. instructions: {
  40. textAlign: "center",
  41. color: "#333333",
  42. marginBottom: 5,
  43. },
  44. });
  45. AppRegistry.registerComponent("iOSHybridRNDemo", () => App)
執行npm start 運行項目

</>復制代碼

  1. 到這里,我們一個簡單的原生嵌入RN開發工程就搭建完成了,我們執行下面命令來運行項目,查看效果

開啟node 服務

</>復制代碼

  1. $ npm start

運行效果

福利時間

作者React Native開源項目OneM地址(按照企業開發標準搭建框架完成開發的):https://github.com/guangqiang-liu/OneM:歡迎小伙伴們 star

作者簡書主頁:包含60多篇RN開發相關的技術文章http://www.jianshu.com/u/023338566ca5 歡迎小伙伴們:多多關注多多點贊

作者React Native QQ技術交流群:620792950 歡迎小伙伴進群交流學習

友情提示:在開發中有遇到RN相關的技術問題,歡迎小伙伴加入交流群(620792950),在群里提問、互相交流學習。交流群也定期更新最新的RN學習資料給大家,謝謝大家支持!

小伙伴們掃下方二維碼加入RN技術交流QQ群

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97517.html

相關文章

  • 【開源】合摩 WeexBox 正式發布

    摘要:目前團隊使用已研發了好幾款,它能滿足及支撐我們上百個頁面的業務場景,讓我們的開發效率大大提升,使我們的技術棧更加完善。最后希望我們的方案能幫助開發中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套簡潔高效的APP混合開發解決方案 寫在開頭 WeexBox...

    BakerJ 評論0 收藏0

發表評論

0條評論

B0B0

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<