最近在研究React Native锌妻，雖然RN中文文檔很清楚贮懈，按照官網(wǎng)一步一步來(lái)，但是在配置開(kāi)發(fā)環(huán)境中還是遇見(jiàn)很多坑挡逼，可能是因?yàn)榧夹g(shù)更新很快但是文檔沒(méi)有更新括改，配置環(huán)境很繁瑣特別是網(wǎng)絡(luò)不好的時(shí)候就更煩人腻豌，本人也是初學(xué)者家坎，有不對(duì)的地方或者有更好的建議希望多多指教。本人對(duì)macdown語(yǔ)法不是很熟練(懶得去學(xué))排版不是很好吝梅，湊合著看吧
環(huán)境macos
參考鏈接(http://facebook.github.io/react-native/docs/troubleshooting.html)
(http://reactnative.cn/docs/0.44/getting-started.html)
一.安裝Homebrew
Homebrew, Mac系統(tǒng)的包管理器虱疏，用于安裝NodeJS和一些其他必需的工具軟件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OS X 10.11（El Capitan)版本中苏携，homebrew在安裝軟件時(shí)可能會(huì)碰到/usr/local目錄不可寫(xiě)的權(quán)限問(wèn)題做瞪。可以使用下面的命令修復(fù)：
sudo chown -R `whoami` /usr/local
二.使用Homebrew來(lái)安裝Node.js.安裝完node后npm也就安裝好了（安裝node也可以直接去官網(wǎng)下載安裝包直接安裝右冻，但是不建議這么做装蓬，因?yàn)樾遁d的時(shí)候可能有點(diǎn)麻煩）
brew install node
npm更新版本npm i -g npm
三.打開(kāi)終端cd到項(xiàng)目根目錄下
1.創(chuàng)建package.json文件，這個(gè)是npm安裝依賴(lài)庫(kù)時(shí)用到的纱扭，執(zhí)行下面命令：（也可用執(zhí)行命令npm init來(lái)創(chuàng)建package.json文件這里我就手動(dòng)創(chuàng)建了）
touch package.json
這時(shí)你會(huì)在根目錄下看到一個(gè)package.json的文件
2.把以下代碼復(fù)制到package.json文件里
{
"name": "NumberTileGame",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.3"
}
}
這里重要的是"scripts"和"dependencies"參數(shù)其他參數(shù)隨便啦牍帚。
在這里有個(gè)坑，浪費(fèi)了一點(diǎn)時(shí)間乳蛾，react-native對(duì)react的版本有嚴(yán)格要求暗赶，高于或低于某個(gè)范圍都不可以鄙币，一開(kāi)始我安裝的react-native和react版本不對(duì)應(yīng)導(dǎo)致后來(lái)出現(xiàn)問(wèn)題了，我用的react版本是"16.0.0-alpha.6"蹂随，react-native版本是"0.44.2"十嘿，你可以使用npm info react和npm info react-native來(lái)查看當(dāng)前的最新版本，npm update -g react-rative-cli更新到最新版本
升級(jí)或者降級(jí)npm包的版本
npm install --save react-native@0.49.3
3.安裝依賴(lài)包
使用npm（node包管理器岳锁，Node package manager）來(lái)安裝React和React Native模塊绩衷。這些模塊會(huì)被安裝到項(xiàng)目根目錄下的node_modules/目錄中。 在包含有package.json文件的目錄（一般也就是項(xiàng)目根目錄）中運(yùn)行下列命令來(lái)安裝：
npm install
安裝好后你會(huì)在根目錄發(fā)現(xiàn)一個(gè)node_modules目錄激率，打開(kāi)后你會(huì)驚訝的發(fā)現(xiàn)怎么會(huì)有這么多文件夾唇聘！不是應(yīng)該只有react-native和react兩個(gè)文件夾嗎！這是正常的因?yàn)閞eact也需要很多依賴(lài)包柱搜，但是看著項(xiàng)目里有這么多文件夾就是不爽迟郎。
四.用 CocoaPods 安裝 React Native
CocoaPods 是 iOS/Mac 開(kāi)發(fā)的管理工具包。還沒(méi)有安裝CocoaPods的 先暫停去安裝CocoaPods吧聪蘸。CocoaPods的安裝我就不說(shuō)了宪肖。
在Podfile添加下面內(nèi)容
# target的名字一般與你的項(xiàng)目名字相同
target 'NumberTileGame' do
# Third party deps
pod 'Folly', :podspec => 'node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'DoubleConversion', :podspec => 'node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => 'node_modules/react-native/third-party-podspecs/GLog.podspec'
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
'CxxBridge',#需要依賴(lài)上面三個(gè)庫(kù)
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0健爬，請(qǐng)加入下面這行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end
注意要加入‘BatchedBridge’模塊要不然會(huì)xcode編譯會(huì)報(bào)錯(cuò)
注意yoga的y要小寫(xiě)不要大寫(xiě)
然后在CocoaPods的安裝目錄下執(zhí)行命令
pod install
五.代碼集成
1.首先創(chuàng)建一個(gè)空的index.ios.js文件控乾。一般來(lái)說(shuō)我們把它放置在項(xiàng)目根目錄下。
index.ios.js是React Native應(yīng)用在iOS上的入口文件娜遵。而且它是不可或缺的蜕衡！它可以是個(gè)很簡(jiǎn)單的文件，簡(jiǎn)單到可以只包含一行require/import導(dǎo)入語(yǔ)句设拟。為了簡(jiǎn)單示范慨仿，把全部的代碼都寫(xiě)到了index.ios.js里（當(dāng)然實(shí)際開(kāi)發(fā)中我們并不推薦這樣做）。
在項(xiàng)目根目錄執(zhí)行以下命令創(chuàng)建文件：
touch index.ios.js
2.在index.ios.js中添加你自己的組件纳胧。這里我們只是簡(jiǎn)單的添加一個(gè)<Text>組件镰吆，然后用一個(gè)帶有樣式的<View>組件把它包起來(lái)。
'use strict';
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模塊的名稱(chēng)
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
RNHighScores是整體js模塊（即你所有的js代碼）的名稱(chēng)跑慕。你在iOS原生代碼中添加React Native視圖時(shí)會(huì)用到這個(gè)名稱(chēng)万皿。
3.在UIViewController添加一個(gè)UIButton，然后在UIButton的點(diǎn)擊事件里添加下面代碼
- (IBAction)highScoreButtonPressed:(id)sender {
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.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];
}
4.在Info.plist里面添加內(nèi)容(如果不添加下面內(nèi)容則需要在點(diǎn)擊事件里url地址里localhost換成你的電腦ip地址)
Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
5.在npm的安裝目錄下執(zhí)行命令
npm start
然后正常運(yùn)行xcode核行，點(diǎn)擊按鈕如果一切順利會(huì)出現(xiàn)
希望你不會(huì)看到紅色的界面＠喂琛！芝雪！
這里我遇見(jiàn)兩個(gè)問(wèn)題减余，一個(gè)是上面說(shuō)的版本不匹配問(wèn)題出現(xiàn)了紅色界面。還有就是 Info.plist沒(méi)有配置網(wǎng)絡(luò)localhost也沒(méi)有改成電腦ip地址绵脯，也出現(xiàn)了紅色界面佳励。
六.總結(jié)
寫(xiě)了這么多休里，其實(shí)當(dāng)你了解了整個(gè)流程，幾分鐘就操作好了赃承。我也是為了防止以后忘了妙黍，就寫(xiě)了這篇文章。這才是剛剛開(kāi)始瞧剖，我也是剛開(kāi)始了解這個(gè)東西拭嫁，還有很多東西需要去了解。希望多多指教
八.離線打包jsbundle
在根目錄下新建一個(gè)bundle文件夾,然后執(zhí)行命令
react-native bundle --entry-file ./index.ios.js --bundle-output ./bundle/index.ios.jsbundle --platform ios --assets-dest ./bundle --dev false
把bundle目錄下的jsbundle文件拖入工程抓于，或者放到自己的服務(wù)器就可以使用了做粤，工程里url地址要做相應(yīng)的改變
七.熱更新........(http://www.beansmile.com/blog/posts/react-native-hot-deployment)
附上demo(https://github.com/wangkai678/WKReactNativeLearn.git)
