React Native整合到原生專案示例
1.建立空專案
2.新增RN依賴包
React Native的植入過程同時需要React和React Native兩個node依賴包。
package.json
我們把具體的依賴包記錄在package.json檔案中。如果專案根目錄中沒有這個檔案,那就自己建立一個。
對於一個典型的React Native專案來說,一般package.json和index.ios.js等檔案會放在專案的根目錄下。而iOS相關的原生程式碼會放在一個名為ios/的子目錄中,這裡也同時放著你的Xcode專案檔案(.xcodeproj)。
下面是一個最簡單的package.json的內容示例。
示例中的version欄位沒有太大意義(除非你要把你的專案釋出到npm倉庫)。scripts中是用於啟動packager服務的命令。dependencies中的react和react-native的版本取決於你的具體需求。一般來說我們推薦使用最新版本。你可以使用npm info react和npm info react-native來檢視當前的最新版本。另外,react-native對react的版本有嚴格要求,高於或低於某個範圍都不可以。本文無法在這裡列出所有react native和對應的react版本要求,只能提醒讀者先嚐試執行npm install,然後注意觀察安裝過程中的報錯資訊,例如require react@某.某.某版本, but none was installed,然後根據這樣的提示,執行npm i -S react@某.某.某版本。
{
"name": "myAppWithRNDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2"
}
}
安裝依賴包
使用npm(node包管理器,Node package manager)來安裝React和React Native模組。這些模組會被安裝到專案根目錄下的node_modules/目錄中。 在包含有package.json檔案的目錄(一般也就是專案根目錄)中執行下列命令來安裝:
$ npm install
3.整合pod
cd進入專案所在目錄,命令列操作
pod init
編輯Podfile檔案後執行命令:
pod install
4.設定info.Plist檔案NSAppTransportSecurity屬性,以此支援http
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
5.建立一個index.ios.js檔案
# 在專案根目錄執行以下命令建立檔案:
$ touch index.ios.js
在index.ios.js檔案中編寫自己所需業務程式碼
6.在原生app新增RN入口
- (IBAction)enterRNViewBtnClicked:(id)sender {
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"Playground"
initialProperties : @{@"scores" :@[@{@"name" : @"Alex", @"value": @"42"},@{@"name" : @"Joel",@"value": @"10"}]}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
注: moduleName引數要匹配index.ios.js檔案中註冊的名字
此處存在問題:可能報錯RCTRootView找不到,需要到專案設定檔案裡設定”${PODS_ROOT}/Headers/Public/React” non-recursive 為 recursive
7.進入node_modules所在目錄,啟動npm服務
npm start
8.執行專案即可
9.demo下載:
https://github.com/Joeyechang/myAppWithRNDemo
參考連結:
相關文章
- React Native整合到現有的原生專案React Native
- 原生專案如何從零開始整合 React NativeReact Native
- React Native 原生模組封裝:支付寶示例React Native封裝
- React Native在Android當中實踐(三)——整合到Android專案當中React NativeAndroid
- React-Native專案總結React
- React Native 導航:示例教程React Native
- React Native --踩坑記 之 建立指定 React Native版本的專案React Native
- react-native 修改專案名稱React
- react native社群專案知識點React Native
- React Native 原生檢視封裝全解析:視訊播放器示例React Native封裝播放器
- (零) React Native 專案開發拾遺React Native
- 如何在 React Native 專案中使用 MQTTReact NativeMQQT
- ? React-Native 官方示例演示 ( ios & android)ReactiOSAndroid
- Flutter入門進階之旅(十八)Flutter專案打包成aar整合到原生Android專案FlutterAndroid
- React Native專案自動化打包釋出React Native
- 建立一個react-native專案(2/4)React
- 利用TypeScript構建優雅的React Native專案TypeScriptReact Native
- React-Native入門(1)-專案工程初識React
- React Native學習指南:React Native嵌入到原生應用的一次嘗試React Native
- 【3月更新】React Native 優秀開源專案大全React Native
- react native 和原生平臺 android的互動React NativeAndroid
- React Native填坑之旅--使用原生檢視AndroidReact NativeAndroid
- [React Native]react-native-scrollabReact Native
- 新版Flutter整合到已有Android專案FlutterAndroid
- 如何高效管理 React Native 專案中的圖片資源React Native
- 微軟推出針對Windows的React Native開發專案微軟WindowsReact Native
- 從零開始生成一個ios react-native專案iOSReact
- 技術實踐丨React Native 專案 Web 端同構React NativeWeb
- 在 React Native 中原生實現動態匯入React Native
- 整合 React Native 到現有的 Android 專案( Mac, Windows 通用版 )React NativeAndroidMacWindows
- React Native Icon方案:react-native-svgReact NativeSVG
- 原生移動應用框架React Native與Flutter比較框架React NativeFlutter
- [譯] 原生 iOS(Swift) 和 React-Native 的效能比較iOSSwiftReact
- React Native轉web方案:react-native-webReact NativeWeb
- React Native 使用 react-native-webview 渲染 HTMLReact NativeWebViewHTML
- 如何在React Native專案中整合華為遠端配置服務React Native
- RN學習(四)——RN專案整合到現有iOS專案中iOS
- React Native 橋接原生 iOS 以及 Android 獲取 APP 版本號React Native橋接iOSAndroidAPP
- React Native搭建開發環境/link原生依賴問題React Native開發環境