7) React Native 集成到原生項目(iOS)

想了很久,要先介紹各種組件的實際應用好,還是先介紹怎么把React Native集成到原生項目好。
因為想起,一旦開始寫各種組件的應用,就會花很長很長的篇幅,會把這個挺重要的內容拋到好遠,而集成到原生項目又是很多人所需要學習的(像我一樣哈,直接替代現有的項目是不科學的,作為一個模塊集合進去才比較現實),所以決定了,還是先花兩個篇章寫寫怎么將React Native集成到原生項目以及JS與原生之間簡單的交互。


由于React并沒有假設你其余部分的技術棧——它通常只作為MVC模型中的V存在——它也很容易嵌入到一個并非由React Native開發的應用當中。實際上,它可以和常見的許多工具結合,譬如CocoaPods。

一、準備工作

1. React Native 開發基礎環境

這個可以直接參考我寫的第二篇文章React Native 環境搭建和創建項目(Mac)。如果已經按上篇文章操作過,或者說已經在Mac平臺已經成功運行過React Native應用,那肯定是已經有了開發基礎環境,可以直接忽略這一步。

1) 安裝Node.js
方式一:
安裝 nvm(安裝向導在這里)。然后運行命令行如下:

nvm install node && nvm alias default node

這將會默認安裝最新版本的Node.js并且設置好命令行的環境變量,這樣你可以輸入node命令來啟動Node.js環境。nvm使你可以可以同時安裝多個版本的Node.js,并且在這些版本之間輕松切換。
方式二:
先安裝Homebrew,再利用Homebrew安裝Node.js,運行命令行如下:

//安裝Home-brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
//安裝Node.js
brew install node

2) 安裝React Native的命令行工具(react-native-cli)

npm install -g react-native-cli

2. 安裝CocoaPods

本文只寫使用CocoaPods安裝React Native的方式,比較支持使用,也比較簡單直接。
若依舊不想使用CocoaPods,想直接集成的朋友可以參考下面兩篇文章:
1)【iOS&Android】RN學習3——集成進現有原生項目

  1. reactnative集成到原生ios項目 文中的手動集成react-native

如果之前已經安裝并使用過CocoaPods,請忽略這一步(相信只要是iOS開發,一定大多數都接觸過了哈)。
若沒有安裝,則運行命令如下:

gem install  cocoa pods
//權限不夠則運行下面一句
sudo gem install cocoapods

二、集成React Native

1. 安裝React Native

1)創建ReactComponent文件夾和配置文件

在項目中建一個名為ReactComponent的文件夾, 用于存放我們react-native的相關文件, 再創建一個package.json文件, 用于初始化react-native.(文件夾名字自定義哈)
文件目錄結構如下:


文件目錄結構1.png

創建package.json文件,文件內容如下:

{
  "name": "NativeRNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.2.1",
    "react-native": "0.29.2"
  }
}

其中,name為項目名稱。dependencies里為react和react-native的版本信息。
建議利用react-native init AwesomeProject新建新項目時會自動創建package.json,直接把文件復制過來,更改name為自己的原生項目名,以確保react、和react-native的版本最新哈。

2)安裝React Native依賴包

在ReactComponent目錄下運行命令行:

npm install

運行效果如下:

npm install.png

這里很需要耐心,曾經的我看著毫無反應的控制臺就放棄了n次。
可能靜下心去看部動漫回來就會發現它只想成功了。
實在install不回來的話,如果之前有創建過React Native項目,把里面的node_modules直接拷貝過來,也是沒有問題(個人嘗試過)。

2. 創建 index.ios.js(js文件入口)

在ReactComponent文件夾里創建index.ios.js文件,作為js文件入口。


目錄結構2.png

index.ios.js文件內容如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class NativeRNApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

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('NativeRNApp', () => NativeRNApp);

3. Cocoapods集成React Native

若原項目無使用Cocoapods,則在根目錄下創建Podfile。(有則直接添加pod相關代碼)
目錄結構如下:


目錄結構3.png

Podfile文件內容為(需確保路徑對):

platform :ios, “7.0”

# 取決于你的工程如何組織,你的node_modules文件夾可能會在別的地方。
# 請將:path后面的內容修改為正確的路徑(一定要確保正確~~)。
pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [
 'Core',
  'ART',
  'RCTActionSheet',
  'RCTAdSupport',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  'RCTVibration',
  'RCTWebSocket',
  'RCTLinkingIOS',
]
#需要的模塊依賴進來便可,這里是為了舉例子,列舉所有的模塊

然后在根目錄執行pod更新命令:

pod install

/*
以下是失敗情況的處理
*/
//  pod命令過慢則可嘗試下面命令
pod install --verbose --no-repo-update

//  其中無法正常下載pod install的解決方法:
(or更新最新的CocoaPods version: 0.39.0  查看方法 pod --version)
gem sources --remove https://rubygems.org/
gem sources -a 
gem sources -l 

# 注意 taobao 是 https; 
# gem如果版本太老可以更新:sudo gem update --system; 
# 更新pod repo:pod repo update

運行效果:


pod install.png

三、原生項目處理

1. 向對應ViewController 添加RCTRootView

下面的ReactViewController是我創建的專門放React Native模塊的ViewController,有必要的話也可對RCTRootView進行進一步封裝(就不用每次都重新配置一次)。
ReactViewController代碼如下:

#import "ReactViewController.h"
#import <RCTRootView.h>

@interface ReactViewController ()

@end

@implementation ReactViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
    
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"NativeRNApp"
                                                  initialProperties:nil
                                                      launchOptions:nil];
    self.view = rootView;
    //  也可addSubview,自定義大小位置
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

項目結構如下:


項目結構.png

2. iOS項目更新App Transport Security

在iOS 9以上的系統中,除非明確指明,否則應用無法通過http協議連接到localhost主機。 我們建議你在Info.plist文件中將localhost列為App Transport Security的例外。 如果不這樣做,在嘗試通過http連接到服務器時,會遭遇這個錯誤 - Could not connect to development server.

打開工程中的 Info.list 文件,添加下面配置即可:

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>localhost</key>
      <dict>
       <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
       <true/>
      </dict>
    </dict>
  </dict>

配置效果如下:


App Transport Security配置.png

3. 啟動開發服務器

在運行我們的項目之前,我們需要先啟動我們的開發服務器。進入 reactnative目錄 ,然后命令行啟動服務:

react-native start

4. 運行iOS項目

運行成功效果如下:


運行效果.png

可以成功看到上面的界面,那就恭喜集成成功了。之前弄這個弄了一兩天,主要卡在npm install不回來那一步,然后pod是不可能的。。寫個更加詳細的教程希望大家能更輕松的把React Native集成到原生項目中哈,有問題歡迎留言哈。

目前暫時把demo打包到自己的百度云(以后再想辦法放到github):
https://pan.baidu.com/s/1hrKnlvm


因為沒繼續這方面的工作所以好久沒更新了,可能代碼因為rn的更新會有些問題,最好更新下pod的版本,看看官方文檔,看到評論里有相應的討論,出現問題的朋友最好也看看評論哈哈,可能有解決綁法?───O(≧?≦)O────?

已有的成果如下:
1) React Native 簡介與入門
2) React Native 環境搭建和創建項目(Mac)
3) React Native 開發之IDE
4) React Native 入門項目與解析
5) React Native 相關JS和React基礎
6) React Native 組件生命周期(ES6)
7) React Native 集成到原生項目(iOS)
8) React Native 與原生之間的通信(iOS)
9) React Native 封裝原生UI組件(iOS)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,923評論 6 535
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,740評論 3 420
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,856評論 0 380
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,175評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,931評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,321評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,383評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,533評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,082評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,891評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,618評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,319評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,732評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,987評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,794評論 3 394
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,076評論 2 375

推薦閱讀更多精彩內容