大家基本都在維護之前的項目，如何在現有的項目中集成React Native是最容易遇到的問題。
集成到 iOS 應的主要步驟：
- 配置好 React Native 依賴和項目結構。
- 瞭解你要集成的 React Native 組件。
- 使用 CocoaPods 把這些組件以依賴的形式加入到項目中。
- 創建 js 文件，編寫 React Native 組件的 js 代碼。
- 在應用中添加一個RCTRootView。這個RCTRootView正是用來承載你的 React Native 組件的容器。
- 啟動 React Native 的 Packager 服務，運行應用。
- 驗證這部分組件是否正常工作。
一、在項目的目錄下創建一個文件夾：ReactNative。
然後創建package.json,搭建React Native環境
{
"name": "APPName",
"version": "1.1.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.2.0",
"react-native": "0.53.3"
}
}
使用npm install 安裝。
安裝成功後，在當前文件夾下,就會出現一個新的/node_modules文件夾,這個文件夾內存儲了所有的JS依賴.
二、配置CocoaPods依賴
比如：
pod 'React', :path => "./ReactNative/node_modules/react-native", :subspecs => [ 'Core', 'DevSupport', # 開啟開發者菜單 'RCTText', 'RCTImage', 'RCTNetwork', 'RCTActionSheet', 'RCTPushNotification', 'RCTWebSocket', # 這個模塊是用於調試功能的 'BatchedBridge' # 解決編譯錯誤 ] pod "yoga", :path => "./ReactNative/node_modules/react-native/ReactCommon/yoga"
然後執行執行pod install
二、
在項目根目錄下創建一個空的index.ios.js文件。
index.ios.js作為入口文件,一般用於註冊輸出JS文件的其他組件,也就是JS各個頁面的入口,內容大致如下,可以註冊多個文件用於多個頁面顯示.
import {
AppRegistry
} from 'react-native'
import A from './AAA'
import B from './BBB'
AppRegistry.registerComponent('Aname', () => A)
AppRegistry.registerComponent('Bname', () => B)
為了避免index.ios.js文件太大,閱讀性差,我們會把對應的組件代碼分到各個.js文件中.如上我們創建了一個AAA.js, 給個模板：
import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
export default class AAA extends React.Component {
render() {
var contents = this.props['scores'].map((score) => (
{score.name}:{score.value}
{'\n'}
));
return (
2048 High Scores!
{contents}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
四、下面我們把寫好的js放到我們原生中顯示出來。
@implementation ReactTestViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"XingHuoLender"
initialProperties:nil
launchOptions:nil];
self.view = rootView;
}
@end
如果要傳參的話就使用：
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"Aname"
initialProperties:
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
}
]
}
launchOptions: nil];
其中jsCodeLocation，可以通過本地調試時,通過起服務,RN的端口號為8081來獲取.
第二種是通過main.jsbundle來獲取：
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
moduleName就是 index.js 約定的組件名：
AppRegistry.registerComponent('Aname', () => AAA);
initialProperties為初始化屬性,這裡傳自己想要的值即可.傳到JS後,可以通過this.props來獲取,
五、
運行 npm start 開啟本地服務。
使用Xcode運行App。
分享到:
