想了很久,要先介紹各種組件的實際應用好,還是先介紹怎么把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——集成進現有原生項目
- 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.(文件夾名字自定義哈)
文件目錄結構如下:
創建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
運行效果如下:
這里很需要耐心,曾經的我看著毫無反應的控制臺就放棄了n次。
可能靜下心去看部動漫回來就會發現它只想成功了。
實在install不回來的話,如果之前有創建過React Native項目,把里面的node_modules直接拷貝過來,也是沒有問題(個人嘗試過)。
2. 創建 index.ios.js(js文件入口)
在ReactComponent文件夾里創建index.ios.js文件,作為js文件入口。
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相關代碼)
目錄結構如下:
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
運行效果:
三、原生項目處理
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
項目結構如下:
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>
配置效果如下:
3. 啟動開發服務器
在運行我們的項目之前,我們需要先啟動我們的開發服務器。進入 reactnative目錄 ,然后命令行啟動服務:
react-native start
4. 運行iOS項目
運行成功效果如下:
可以成功看到上面的界面,那就恭喜集成成功了。之前弄這個弄了一兩天,主要卡在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)