rn项目 假如cocoapods_在项目中集成 RN
在項(xiàng)目中集成 RN
19 Jan 2017
前言
使用 RN 難道要把整個(gè)項(xiàng)目都重構(gòu)一遍么？教程那么多，但是很少能夠有把怎么與當(dāng)前項(xiàng)目結(jié)合起來的文章。自己摸索了一遍，記錄下來。之后的 RN 之路就由此開始。需要注意的是，RN 的版本迭代相當(dāng)快，不同版本的差別比較大，填坑時(shí)留意下版本。
集成 RN
前提是 RN 相關(guān)環(huán)境已經(jīng)搭建好。
創(chuàng)建組件
新建目錄 react-component，并在其下面創(chuàng)建 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);
在此目錄下，執(zhí)行：
npm installreact
npm installreact-native@0.38.0
由于最近發(fā)布的 0.40.0 版本變化比較大，所以暫時(shí)使用 0.38.0 版本。所以 npm 制定升級(jí) npm install react-native@0.37.0。具體查看：升級(jí)。
初始化 Pods
推薦使用 CocoaPads 管理第三方庫，同時(shí)方便集成 RN。
新建 react-in-project 項(xiàng)目，并在項(xiàng)目目錄下使用命令 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文件夾可能會(huì)在別的地方。
# 請(qǐng)將:path后面的內(nèi)容修改為正確的路徑。
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 版本已經(jīng)遠(yuǎn)遠(yuǎn)落后于官方版本，所以官方推薦引用本地的方式。
再次執(zhí)行 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.
項(xiàng)目中引用
項(xiàng)目頁面如圖：
新建 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
此時(shí)運(yùn)行會(huì)報(bào)錯(cuò)：
原因是還沒啟動(dòng) node 服務(wù)。
啟動(dòng)服務(wù)
我們需要啟動(dòng)一個(gè)端口為 8081 的服務(wù)將 index.ios.js 打包成 index.ios.bundle 。然后我們的代碼就可以加載了。
在項(xiàng)目目錄下運(yùn)行命令：
```(JS_DIR=pwd/react-component; cd react-component/node_modules/react-native; npm run start – –root $JS_DIR)
> 1.將新建的 react-component 文件夾目錄賦值到JS_DIR上，需要全路徑
> 2.進(jìn)入 Pods/React 目錄
> 3.綁定JS_DIR會(huì)監(jiān)聽react-component文件夾下的文件，然后 npm run start 啟動(dòng) node 服務(wù)
> 4.三行命令用()包裝起來，可以避免運(yùn)行后定位到 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 ，可以訪問到，但是模擬器還是有錯(cuò)誤。
此時(shí)需要開啟 http 的支持。
開啟 http
項(xiàng)目的 Info.plist 文件中，加入：
NSAppTransportSecurity
NSExceptionDomains
localhost
NSTemporaryExceptionAllowsInsecureHTTPLoads
再次報(bào)錯(cuò)如下：
修改 Podfile，添加依賴庫 pod 'React/RCTWebSocket'。執(zhí)行命令 pod update --no-repo-update。
再次運(yùn)行項(xiàng)目，得到預(yù)期結(jié)果：
點(diǎn)擊 PUSH：
需要進(jìn)一步確認(rèn)的是：
1.怎么自定義加載的(服務(wù)器)地址，應(yīng)該可以進(jìn)行參數(shù)化，由業(yè)務(wù)的server 進(jìn)行下發(fā)需要加載 bundle 的地址，然后客戶端去加載。
2.不同的頁面需要加載不同的 bundle 時(shí)，怎么進(jìn)行區(qū)分。
代碼：
文章中的代碼都可以從我的GitHub react-in-project找到。
總結(jié)
以上是生活随笔為你收集整理的rn项目 假如cocoapods_在项目中集成 RN的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mybatis select语句会默认带
- 下一篇： python中3个单引号_Python中