當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

rn项目假如cocoapods_在项目中集成 RN

發(fā)布時(shí)間：2025/3/20 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 rn项目假如cocoapods_在项目中集成 RN 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在項(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

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

[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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

项目
rn

上一篇： mybatis select语句会默认带
下一篇： python中3个单引号_Python中

编程问答

rn项目 假如cocoapods_在项目中集成 RN

總結(jié)

rn项目假如cocoapods_在项目中集成 RN