參考文檔：reactnative文檔
reactnative last version: 0.53版本我無力吐槽，0.52表示無能為力，我放棄了。本文是基于0.51版本。
(1) 新建xcode project，名字是ReactNativeDemo。在項目根目錄下，新建ReactNative文件夾，用于存放跟reactnative相關文件。
image.png
(2) 打開終端，cd 到 ReactNative文件夾里面，創建package.json文件。
touch package.json
image.png
(3) 打開package.json，輸入下面關于reactnative相關配置信息。
{
"name": "ReactNativeDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0"
}
}
(4) cd 到ReactNative文件夾里面，安裝依賴包
npm install
image.png
安裝完會多出兩個文件。
image.png
(5) 新建index.js文件，作為reactnative程序入口，之前的版本是index.ios.js
touch index.js
image.png
(6) 在index.js中寫測試代碼...
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class ScoresView extends React.Component {
render() {
var contents = this.props['scores'].map((score) => (
<Text key={score.name}>
{score.name}:{score.value}
{'\n'}
</Text>
));
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>2048 High Scores!</Text>
<Text style={styles.scores}>{contents}</Text>
</View>
);
}
}
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,
},
});
// 注冊組件，程序入口
// 第一個參數：注冊模塊名稱,這里親測不和項目名一致也可以，但是好多資料說名字要和項目名一致
// 第二個參數：函數，此函數返回組件類名，程序啟動就會自動去加載這個組件
AppRegistry.registerComponent('App', () => ScoresView);
(7) cd 到項目根目錄，創建profile文件
image.png
(8) pod以下文件：
特殊說明：這里用CxxBridge 代替 BatchedBridge，因為BatchedBridge不久將會被remove掉。
react_native_path：文件路徑必須和自己創建的實際文件路徑一樣
source 'https://github.com/CocoaPods/Specs.git'
react_native_path = './ReactNative/node_modules/react-native'
platform :ios, ‘9.0’
use_frameworks!
target 'ReactNativeDemo' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
pod 'React', :path => react_native_path, :subspecs => [
'Core',
#'BatchedBridge', # 0.45 版本以后需要添加
'CxxBridge',
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發者菜單
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調試功能的
# 在這里繼續添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0，則加入下面這行
pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
# Third party deps
pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => react_native_path + '/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
end
終端執行pod install
pod install
(9) 配置App Transport Security
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
(10) 打開項目，在ViewController隨便添加按鈕，添加點擊事件。
記得導入頭文件
#import <React/RCTRootView.h>
添加點擊跳轉方法：
- (IBAction)pushToReactNativeView:(id)sender {
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"App"
initialProperties:
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
??運行會報錯：
把#import <fishhook/fishhook.h> 改為 #import "fishhook.h"就好了。
image.png
(11) 打開服務器：
cd到ReactNative文件夾，終端開啟服務器：
npm start
image.png
(12) 運行結果：
reactnative.gif
