以下創(chuàng)建過(guò)程的前提，電腦已經(jīng)安裝cocoaPods拆檬，已經(jīng)配置好react native環(huán)境，以下終端命令我都是在項(xiàng)目根目錄下進(jìn)行妥凳。
第一步竟贯，Xcode傳建一個(gè)原生項(xiàng)目。
第二步逝钥，添加RN需要的配置文件
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)package.json文件
touch package.json
把以下內(nèi)容復(fù)制進(jìn)去：
{
"name" : "RNDemo",
"version" : "0.0.1",
"private" : true,
"scripts" : {
"start" : "node node_modules/react-native/local-cli/cli.js start",
"test" : "jest"
},
"dependencies" : {
"react" : "16.0.0-alpha.6",
"react-native" : "0.44.3"
}
}
react和react-native的版本根據(jù)自己的需要進(jìn)行設(shè)定屑那，但要注意二者版本匹配。然后艘款，在項(xiàng)目根目錄下執(zhí)行：
npm install
第三步持际，添加cocoaPods需要的配置文件
在項(xiàng)目的根目錄下創(chuàng)建一個(gè)Podfile文件
vim Podfile
把以下內(nèi)容復(fù)制進(jìn)去：
platform :ios, '8.0'
target “RNDemo” do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod ‘Yoga’, :path => './node_modules/react-native/ReactCommon/yoga’
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
end
依賴(lài)的庫(kù)名是React, 根據(jù)項(xiàng)目的需要添加不同的subspecs進(jìn)來(lái)哗咆。如要使用Text那么加進(jìn)來(lái)RCTText, Image就加RCTImage等等蜘欲。可用的subspecs列表可以查閱
node_modules/react-native/React.podspec文件晌柬。然后執(zhí)行：
pod install
注意執(zhí)行pod install 時(shí)可能會(huì)發(fā)生以下錯(cuò)誤
1姥份、路徑錯(cuò)誤
[!] No podspec found for `React` in`./ReactComponent/node_modules/react-native`
[!] Your Podfile has had smart quotes sanitised. To avoid issues in the future, you should not use TextEdit for editing it. If you are not using TextEdit, you should turn off smart quotes in your editor of choice.
解決辦法是查看path中路徑是否正確呜叫，修改成卻路徑即可。
2殿衰、路徑指定正確后朱庆，可能會(huì)提示下面這個(gè)錯(cuò)誤：
如果copy我的Podfile文件里的全部?jī)?nèi)容，不會(huì)出現(xiàn)此問(wèn)題闷祥，此問(wèn)題是由于Yoga的路徑問(wèn)題娱颊。
第四步，創(chuàng)建index.ios.js
在項(xiàng)目根目錄下：
touch index.ios.js
'use strict'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class NativeAPP 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('NativeAPP', () => NativeAPP);
第五步凯砍，用Xcode打開(kāi)app
1箱硕、配置下info.plist文件配置HTTP請(qǐng)求白名單，在iOS 9以上的系統(tǒng)中悟衩，需要配置白名單剧罩，否則應(yīng)用無(wú)法通過(guò)http協(xié)議連接到localhost主機(jī)。 如果不這樣做座泳，在嘗試通過(guò)http連接到服務(wù)器時(shí)惠昔，會(huì)遭遇這個(gè)錯(cuò)誤 - Could not connect to development server. 添加
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
不配置報(bào)錯(cuò)信息：
2、運(yùn)行工程之前我們需要先將service服務(wù)運(yùn)行起來(lái)挑势，執(zhí)行
npm start
3镇防、代碼里引入頭文件：
#import "RCTRootView.h"
按鈕點(diǎn)擊事件：
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView = [[RCTRootView alloc]
initWithBundleURL : jsCodeLocation
moduleName : @"NativeAPP"
initialProperties: nil
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
