- 配置項(xiàng)目目錄結(jié)構(gòu)
首先創(chuàng)建一個(gè)空目錄用于存放 React Native 項(xiàng)目廷痘，然后在其中創(chuàng)建一個(gè)/ios子目錄规婆，把你現(xiàn)有的 iOS 項(xiàng)目拷貝到/ios子目錄中泽裳。
2.在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為package.json的空文本文件，然后填入以下內(nèi)容：
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
接下來我們使用 yarn 或 npm（兩者都是 node 的包管理器）來安裝 React 和 React Native 模塊增拥。請打開一個(gè)終端/命令提示行啄巧，進(jìn)入到項(xiàng)目目錄中（即包含有 package.json 文件的目錄），然后運(yùn)行下列命令來安裝：
yarn add react-native
這樣默認(rèn)會(huì)安裝最新版本的 React Native掌栅，同時(shí)會(huì)打印出類似下面的警告信息（你可能需要滾動(dòng)屏幕才能注意到）：
warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
這是正持绕停現(xiàn)象，意味著我們還需要安裝指定版本的 React：
$ yarn add react@16.2.0
注意必須嚴(yán)格匹配警告信息中所列出的版本猾封，高了或者低了都不可以逗概。
接下來需要在podfile里添加依賴庫
# target的名字一般與你的項(xiàng)目名字相同
target 'NumberTileGame' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47則加入此行
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 調(diào)試功能需要此模塊
'RCTAnimation', # FlatList和原生動(dòng)畫功能需要此模塊
# 在這里繼續(xù)添加你所需要的其他RN模塊
]
# 如果你的RN版本 >= 0.42.0逾苫，則加入下面這行
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# 如果RN版本 >= 0.45則加入下面三個(gè)第三方編譯依賴
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end
代碼集成
- 創(chuàng)建一個(gè)index.js文件
首先在項(xiàng)目根目錄下創(chuàng)建一個(gè)空的index.js文件卿城。 - 添加你自己的 React Native 代碼
在index.js中添加你自己的組件。這里我們只是簡單的添加一個(gè)<Text>組件铅搓，然后用一個(gè)帶有樣式的<View>組件把它包起來瑟押。
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores 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,
},
});
// 整體js模塊的名稱
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
RNHighScores是整體 js 模塊（即你所有的 js 代碼）的名稱。你在 iOS 原生代碼中添加 React Native 視圖時(shí)會(huì)用到這個(gè)名稱星掰。
掌握核心科技： RCTRootView
現(xiàn)在我們已經(jīng)在index.js中創(chuàng)建了 React Native 組件多望，下一步就是把這個(gè)組件添加給一個(gè)新的或已有的ViewController。
首先導(dǎo)入RCTRootView的頭文件氢烘。
#import <React/RCTRootView.h>
這里的initialProperties注入了一些演示用的數(shù)據(jù)怀偷。在 React Native 的根組件中，我們可以使用this.props來獲取到這些數(shù)據(jù)播玖。
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"RNHighScores"
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];
- 添加 App Transport Security 例外
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
4.運(yùn)行 Packager
要運(yùn)行應(yīng)用椎工，首先需要啟動(dòng)開發(fā)服務(wù)器（即 Packager，它負(fù)責(zé)實(shí)時(shí)監(jiān)測 js 文件的變動(dòng)并實(shí)時(shí)打包蜀踏，輸出給客戶端運(yùn)行）维蒙。具體只需簡單進(jìn)入到項(xiàng)目根目錄中，然后運(yùn)行：
npm start
5.運(yùn)行應(yīng)用
如果你使用的是 Xcode果覆，那么照常編譯和運(yùn)行應(yīng)用即可颅痊。如果你沒有使用 Xcode（但是你仍然必須安裝 Xcode），則可以在命令行中使用以下命令來運(yùn)行應(yīng)用：
react-native run-ios
