參考文檔：reactnative文檔
reactnative last version: 0.53版本我無力吐槽资厉，0.52表示無能為力，我放棄了难礼。本文是基于0.51版本穴亏。
(1) 新建xcode project，名字是ReactNativeDemo滓走。在項(xiàng)目根目錄下垦江，新建ReactNative文件夾，用于存放跟reactnative相關(guān)文件闲坎。
image.png
(2) 打開終端疫粥，cd 到 ReactNative文件夾里面，創(chuàng)建package.json文件腰懂。
touch package.json
image.png
(3) 打開package.json梗逮，輸入下面關(guān)于reactnative相關(guān)配置信息。
{
"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
安裝完會(huì)多出兩個(gè)文件慷彤。
image.png
(5) 新建index.js文件，作為reactnative程序入口怖喻，之前的版本是index.ios.js
touch index.js
image.png
(6) 在index.js中寫測(cè)試代碼...
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,
},
});
// 注冊(cè)組件底哗，程序入口
// 第一個(gè)參數(shù)：注冊(cè)模塊名稱,這里親測(cè)不和項(xiàng)目名一致也可以，但是好多資料說名字要和項(xiàng)目名一致
// 第二個(gè)參數(shù)：函數(shù)锚沸，此函數(shù)返回組件類名跋选，程序啟動(dòng)就會(huì)自動(dòng)去加載這個(gè)組件
AppRegistry.registerComponent('App', () => ScoresView);
(7) cd 到項(xiàng)目根目錄，創(chuàng)建profile文件
image.png
(8) pod以下文件：
特殊說明：這里用CxxBridge 代替 BatchedBridge哗蜈，因?yàn)锽atchedBridge不久將會(huì)被remove掉前标。
react_native_path：文件路徑必須和自己創(chuàng)建的實(shí)際文件路徑一樣
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'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同坠韩，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => react_native_path, :subspecs => [
'Core',
#'BatchedBridge', # 0.45 版本以后需要添加
'CxxBridge',
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的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
終端執(zhí)行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) 打開項(xiàng)目只搁，在ViewController隨便添加按鈕，添加點(diǎn)擊事件俭尖。
記得導(dǎo)入頭文件
#import <React/RCTRootView.h>
添加點(diǎn)擊跳轉(zhuǎn)方法：
- (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];
}
??運(yùn)行會(huì)報(bào)錯(cuò)：
把#import <fishhook/fishhook.h> 改為 #import "fishhook.h"就好了氢惋。
image.png
(11) 打開服務(wù)器：
cd到ReactNative文件夾，終端開啟服務(wù)器：
npm start
image.png
(12) 運(yùn)行結(jié)果：
reactnative.gif
