rn项目 假如cocoapods_在项目中集成 RN
在項目中集成 RN
19 Jan 2017
前言
使用 RN 難道要把整個項目都重構一遍么？教程那么多，但是很少能夠有把怎么與當前項目結合起來的文章。自己摸索了一遍，記錄下來。之后的 RN 之路就由此開始。需要注意的是，RN 的版本迭代相當快，不同版本的差別比較大，填坑時留意下版本。
集成 RN
前提是 RN 相關環境已經搭建好。
創建組件
新建目錄 react-component，并在其下面創建 js 文件 index.ios.js。
'use strict';
var React = require('react-native');
var {
Text,
View,
Image,
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleApp extends React.Component {
render() {
return (
This is a simple application. )
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
在此目錄下，執行：
npm installreact
npm installreact-native@0.38.0
由于最近發布的 0.40.0 版本變化比較大，所以暫時使用 0.38.0 版本。所以 npm 制定升級 npm install react-native@0.37.0。具體查看：升級。
初始化 Pods
推薦使用 CocoaPads 管理第三方庫，同時方便集成 RN。
新建 react-in-project 項目，并在項目目錄下使用命令 pod init ，然后 Podfile 文件如下：
# Uncomment the next line to define a global platform for your project
platform :ios, '8.0'
target 'react-in-project' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
# 取決于你的工程如何組織，你的node_modules文件夾可能會在別的地方。
# 請將:path后面的內容修改為正確的路徑。
pod 'React', :path => './react-component/node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依賴。
]
target 'react-in-projectTests' do
inherit! :search_paths
# Pods for testing
end
target 'react-in-projectUITests' do
inherit! :search_paths
# Pods for testing
end
end
pod 'React'CocoaPods中 pod 版本已經遠遠落后于官方版本，所以官方推薦引用本地的方式。
再次執行 shell 命令 pod install。
$pod installAnalyzing dependencies
Fetching podspec for `React` from `./react-component/node_modules/react-native`
Downloading dependencies
Installing React 0.38.0 (was 0.40.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 5 dependencies from the Podfile and 1 total pod installed.
項目中引用
項目頁面如圖：
新建 ReactView 類：
//ReactView.m
#import "ReactView.h"
#import
@interface ReactView()
@property (nonatomic, weak) RCTRootView *rootView;
@end
@implementation ReactView
- (void)awakeFromNib {
[super awakeFromNib];
NSString *urlString = @"http://localhost:8081/index.ios.bundle";
NSURL *jsCodeLocation = [NSURL URLWithString:urlString];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"SimpleApp"
initialProperties:nil
launchOptions:nil];
self.rootView = rootView;
[self addSubview:rootView];
self.rootView.frame = self.bounds;
}
@end
RootViewController.m 中：
#import "RootViewController.h"
#import "ReactView.h"
@interface RootViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end
@implementation RootViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}
@end
此時運行會報錯：
原因是還沒啟動 node 服務。
啟動服務
我們需要啟動一個端口為 8081 的服務將 index.ios.js 打包成 index.ios.bundle 。然后我們的代碼就可以加載了。
在項目目錄下運行命令：
```(JS_DIR=pwd/react-component; cd react-component/node_modules/react-native; npm run start – –root $JS_DIR)
> 1.將新建的 react-component 文件夾目錄賦值到JS_DIR上，需要全路徑
> 2.進入 Pods/React 目錄
> 3.綁定JS_DIR會監聽react-component文件夾下的文件，然后 npm run start 啟動 node 服務
> 4.三行命令用()包裝起來，可以避免運行后定位到 Pods/React 目錄下
輸出：
```shell
$ (JS_DIR=`pwd`/react-component; cd react-component/node_modules/react-native; npm run start -- --root $JS_DIR)
> react-native@0.38.0 start /Users/qd-hxt/Documents/gworkspace/react-in-project/react-component/node_modules/react-native
> /usr/bin/env bash -c './packager/packager.sh "$@" || true' -- "--root" "/Users/qd-hxt/Documents/gworkspace/react-in-project/react-component"
Scanning 640 folders for symlinks in /Users/qd-hxt/Documents/gworkspace/react-in-project/react-component/node_modules (8ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/qd-hxt/Documents/gworkspace/react-in-project/react-component
/Users/qd-hxt/Documents/gworkspace/react-in-project/react-component
[Hot Module Replacement] Server listening on /hot
React packager ready.
[2017-1-22 18:04:19] Initializing Packager
[2017-1-22 18:04:19] Building in-memory fs for JavaScript
[2017-1-22 18:04:20] Building in-memory fs for JavaScript (151ms)
[2017-1-22 18:04:20] Building Haste Map
[2017-1-22 18:04:20] Building Haste Map (462ms)
[2017-1-22 18:04:20] Initializing Packager (662ms)
用瀏覽器訪問 http://localhost:8081/index.ios.bundle ，可以訪問到，但是模擬器還是有錯誤。
此時需要開啟 http 的支持。
開啟 http
項目的 Info.plist 文件中，加入：
NSAppTransportSecurity
NSExceptionDomains
localhost
NSTemporaryExceptionAllowsInsecureHTTPLoads
再次報錯如下：
修改 Podfile，添加依賴庫 pod 'React/RCTWebSocket'。執行命令 pod update --no-repo-update。
再次運行項目，得到預期結果：
點擊 PUSH：
需要進一步確認的是：
1.怎么自定義加載的(服務器)地址，應該可以進行參數化，由業務的server 進行下發需要加載 bundle 的地址，然后客戶端去加載。
2.不同的頁面需要加載不同的 bundle 時，怎么進行區分。
代碼：
文章中的代碼都可以從我的GitHub react-in-project找到。
總結
以上是生活随笔為你收集整理的rn项目 假如cocoapods_在项目中集成 RN的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mybatis select语句会默认带
- 下一篇： bootstrap3 商品列表_Boot