由于RN的版本變更很快溅呢，建議查看官方的指南 http://facebook.github.io/react-native/docs/integration-with-existing-apps.html
最近在學(xué)習(xí)ReactNative演侯，文檔中都是從頭開(kāi)始的，RN的優(yōu)點(diǎn)不用多說(shuō)，NodeJs赖歌，熱更新等等倦畅。如果說(shuō)用RN重寫(xiě)一個(gè)App 可以說(shuō)這個(gè)工程是巨大的。
但是如果要在我們已有的工程中集成冕广，使用RN來(lái)編寫(xiě)某個(gè)需要經(jīng)常變更或者更新的功能模塊，聽(tīng)上去倒是挺不錯(cuò)的偿洁。
下面就開(kāi)始吧撒汉。
新建或打開(kāi)一個(gè)已有的Xcode項(xiàng)目
新建一個(gè)Xcode工程當(dāng)做是一個(gè)已有的項(xiàng)目
使用CocoaPods
在項(xiàng)目根目錄創(chuàng)建或者修改Podfile 文件添加ReactNative 主要 依賴(lài)庫(kù)，其中必須添加的是 React 和 React/RCTWebSocket涕滋，這里ReactNative可以根據(jù)你的需求來(lái)在Pod中添加需要的組件庫(kù)來(lái)減少App的體積睬辐。
use_frameworks!
target 'RNTest' do
pod 'React'
pod 'React/RCTText'
pod 'React/RCTWebSocket'
end
新建或修改完成之后，執(zhí)行安裝
$ pod install
編寫(xiě)ReactNative 模塊
在根目錄創(chuàng)建一個(gè) index.ios.js 文件作為ReactNative模塊主文件宾肺，可以在此基礎(chǔ)上添加擴(kuò)展更多功能溯饵。
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var RNTestComponent = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
巴拉巴拉巴拉 碧池
</Text>
</View>
);
}
});
var 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('RNTestComponent', () => RNTestComponent);
在Swift代碼中使用 RN模塊
然后我們需要在native代碼中使用ReactNative所編寫(xiě)的模塊。
import UIKit
import React
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let url = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios&dev=true")
let rctView = RCTRootView(bundleURL: url, moduleName: "RNTestComponent", initialProperties: nil, launchOptions: nil)
rctView.frame = CGRect(x: 0, y: 20, width: self.view.frame.width, height: self.view.frame.height)
self.view.addSubview(rctView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
啟動(dòng)/運(yùn)行
在執(zhí)行 pod install 之后會(huì)在Pods/React目錄中生成 Nodejs 的配置文件 package.json 并且會(huì)自動(dòng)下載所依賴(lài)的 node_modules锨用，所以只需要在文件夾目錄執(zhí)行命令即可啟動(dòng)ReactNative服務(wù)丰刊，當(dāng)然你也可以把啟動(dòng)命令交給Xcode 的run Script 處理竟终，在App 啟動(dòng)時(shí)會(huì)自動(dòng)啟動(dòng)Nodejs服務(wù)挪丢。
$ npm start
然后運(yùn)行Xcode工程就可看到你編寫(xiě)的ReactNative模塊了营勤。
當(dāng)然战虏，完成一個(gè)完整的模塊需要解決的問(wèn)題肯定會(huì)有很多凫乖，現(xiàn)在只是完成了最簡(jiǎn)單的部分洛巢，接下來(lái)要做的還有一些通铲，比如說(shuō)RN 與Native 代碼互相調(diào)用旺矾、網(wǎng)絡(luò)通信渣玲、熱更新等等...
找了兩天的房子逗概，不得不吐槽一下北京的房?jī)r(jià)，租不起了忘衍！逾苫。
