摘要:交流群也定期更新最新的學習資料給大家,謝謝大家支持小伙伴們掃下方二維碼加入技術交流群
iOS原生混合RN開發詳解
示例Demo地址</>復制代碼
做過原生iOS開發或者Android開發的同學們肯定也都了解Hybrid,有一些Hybrid的開發經驗,目前我們企業開發中運用最廣泛的Hybrid App技術就是原生與H5 hybrid,在早期的時候,可能部分同學也接觸過PhoneGap等hybrid技術,今天我們就簡單來聊下一種比較新的Hybrid技術方案,原生App與ReactNativie Hybrid,如果有同學們對React Native技術不熟悉的同學,可以查看作者簡書中對React Native基礎的講解:React Native入門到實戰講解
初級Demo示例
高級Demo示例
具體步驟創建一個iOS原生項目
將iOS原生項目支持pod
調整目前項目工程的文件夾結構
添加RN依賴相關文件
安裝React Native
修改Podfile文件,原生安裝React Native依賴庫
在iOS原生頁面填加RN頁面入口
修改RN入口文件 index.ios.js
執行npm start 運行項目
創建一個iOS原生項目項目支持pod</>復制代碼
使用Xcode創建一個空的項目,這個應該不用多說了
</>復制代碼
這一操作步驟同樣也很簡單,我們只需要執行下面的幾條命令即可,如果對cocoapods 安裝使用不熟悉的同學請參照作者簡書
創建podfile文件,我們在有xcodeproj文件的同級目錄下執行下面命令,這時我們的項目文件中就多了一個Podfile文件
</>復制代碼
$ pod init
執行pod install 命令來安裝pod,同樣,這個命令也是在有xcodeproj同級目錄下,安裝完成后,我們的項目多了一個
</>復制代碼
$ pod install
注意: 這里對原生iOS不熟悉的同學們需要注意了,當我們使用pod來作為庫管理工具,后面我們打開項目運行,我們就需要打開上圖所示的xcworkspace文件了
調整目前項目工程的文件夾結構添加RN依賴相關文件</>復制代碼
這里對文件夾做結構調整是為了后期更好的將Android原始項目也使用RN Hybrid,使iOS和Android共享一份React Native框架,共享同一份JS文件,調整的后的文件夾結構如下
</>復制代碼
到這里,我們原生的iOS項目目錄結構已近調整完畢,后面我們需要處理的都是RN相關的內容了,這里需要創建的文件有點多,大家可以直接將示例Demo中的這幾個文件直接拖到自己的項目中,然后在做修改即可
首先我們需要創建package.json文件
創建index.ios.js文件
創建index.android.js文件
創建bundle文件夾,注意這個文件夾是后面我們接入CodePush熱更新時使用的
安裝React Native</>復制代碼
安裝React Native這個也很簡單,我們也是簡單的執行下面的命令即可,注意:執行npm 系列的命令,我們都需要在項目根目錄(有package.json文件的目錄)下執行
</>復制代碼
$ npm install
package.json文件內容如下
</>復制代碼
{
"name": "iOSHybridRNDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-code-push": "^5.2.2",
"react-native-root-toast": "^1.3.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-native-simple-store": "^1.3.0",
"react-native-storage": "^0.2.2",
"react-native-vector-icons": "^4.3.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-actions": "^2.2.1",
"redux-promise-middleware": "^4.4.1",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "22.4.1",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
注意:因為我們項目中使用到了react-native-vector-icons 這個iconFont組件需要依賴原生,所以我們執行完 npm install 之后,我們還需要 再執行一個 react-native link react-native-vector-icons 命令來安裝原生依賴
</>復制代碼
$ react-native link react-native-vector-icons
當我們執行完npm install 命令之后,我們再打開項目目錄,發現多了一個 node_modules 文件夾,這個文件夾就是我們安裝的React Native所有的依賴庫
修改Podfile文件,原生安裝React Native依賴庫</>復制代碼
后面我們都是使用Pod來管理原生的依賴庫,安裝React Native依賴庫,我們只需要將下面的Podfile文件中的內容添加進去,執行 pod install 安裝即可
Podfile文件
</>復制代碼
# Uncomment the next line to define a global platform for your project
platform :ios, "9.0"
# Uncomment the next line if you"re using Swift or would like to use dynamic frameworks
# use_frameworks!
target "iOSHybridRNDemo" do
# Pods for iOSHybridRNDemo
#***********************************************************************#
# "node_modules"目錄一般位于根目錄中
# 但是如果你的結構不同,那你就要根據實際路徑修改下面的`:path`
pod "React", :path => "../node_modules/react-native", :subspecs => [
"Core",
"RCTText",
"RCTImage",
"RCTActionSheet",
"RCTGeolocation",
"RCTNetwork",
"RCTSettings",
"RCTVibration",
"BatchedBridge",
"RCTWebSocket",
"ART",
"RCTAnimation",
"RCTBlob",
"RCTCameraRoll",
"RCTPushNotification",
"RCTLinkingIOS",
"DevSupport"
# 在這里繼續添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0,請加入下面這行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
#***********************************************************************#
pod "RNVectorIcons", :path => "../node_modules/react-native-vector-icons"
end
注意: #*************************# 中間的內容是我們需要添加的RN依賴庫,后面我們所有pod 相關的命令,我們都需要iOS根目錄(有Podfile文件的目錄)下執行
執行安裝命令
在iOS原生頁面填加RN頁面入口</>復制代碼
$ pod install
</>復制代碼
現在我就來實現從原生頁面跳RN頁面
使用RN提供一個View視圖代碼如下
</>復制代碼
NSURL * jsCodeLocation;
#ifdef DEBUG
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
jsCodeLocation = [NSURL URLWithString:strUrl];
#else
jsCodeLocation = [CodePush bundleURL];
#endif
NSDictionary *params = @{@"componentName":@"MeApp1", @"args":@{@"params":@"這是原生傳遞的參數"}};
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"iOSRN"
initialProperties:params
launchOptions:nil];
self.view = rootView;
修改RN入口文件 index.ios.js
</>復制代碼
修改RN頁面的入口文件,這里當是iOS入口我們修改index.ios.js文件,當Android入口,我們修改index.android.js文件
index.ios.js文件
</>復制代碼
import React, {Component} from "react"
import {
Platform,
StyleSheet,
Text,
View,
AppRegistry
} from "react-native";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,
" +
"Cmd+D or shake for dev menu",
android: "Double tap R on your keyboard to reload,
" +
"Shake or press menu button for dev menu",
});
type Props = {};
export default class App extends Component {
render() {
return (
Welcome to React Native!
To get started, edit App.js
{instructions}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5,
},
});
AppRegistry.registerComponent("iOSHybridRNDemo", () => App)
執行npm start 運行項目
</>復制代碼
到這里,我們一個簡單的原生嵌入RN開發工程就搭建完成了,我們執行下面命令來運行項目,查看效果
開啟node 服務
</>復制代碼
$ 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
摘要:目前團隊使用已研發了好幾款,它能滿足及支撐我們上百個頁面的業務場景,讓我們的開發效率大大提升,使我們的技術棧更加完善。最后希望我們的方案能幫助開發中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套簡潔高效的APP混合開發解決方案 寫在開頭 WeexBox...
閱讀 2111·2023-04-25 20:52
閱讀 2505·2021-09-22 15:22
閱讀 2131·2021-08-09 13:44
閱讀 1773·2019-08-30 13:55
閱讀 2819·2019-08-23 15:42
閱讀 2291·2019-08-23 14:14
閱讀 2884·2019-08-23 13:58
閱讀 3015·2019-08-23 11:49
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要