下面需要安裝的
一
Homebrew
Mac系統的包管理器，用于安裝NodeJS和一些其他必需的工具軟件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Watchman
是由Facebook提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能（packager可以快速捕捉文件的變化從而實現實時刷新）。
brew install watchman
Cocoapod
是一個iOS包管理工具.為了安裝RN相關的庫.
http://code4app.com/article/cocoapods-install-usage
Flow
Flow是一個靜態的JS類型檢查工具。語法檢查工具
brew install flow
Node
使用Homebrew來安裝Node.js.
React Native目前需要NodeJS 5.0或更高版本。本文發布時Homebrew默認安裝的是最新版本，一般都滿足要求。
brew install node
Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執行創建、初始化、更新項目、運行打包服務（packager）等任務。
npm install -g yarn react-native-cli
注意:npm install 的安裝目錄,一般現在終端cd到對應的目錄(node_modules),然后安裝到node_modules目錄里
二.
嵌入React-Native(簡稱RN),有兩種.第一種新建純RN項目,第二種OC與RN混編.我這里講的是嵌入老項目,如果是RN新項目,坑是不多的.
首先你得有一個package.json,名字就叫這個,然后npm intsall,cd到你想導入的目錄(比如我的是RNComponent目錄)你會發現多出一個node_modules 目錄,這個目錄就是你的依賴包
{
"name": "xxx",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-md5": "^1.0.0",
"react-native-swiper": "^1.5.4",
"react-native-viewpager": "^0.2.13",
"react-timer-mixin": "^0.13.3"
}
}
1."name": "xxx",你的target 名字
2.dependencies下的都是我導入的第三方庫(react-native-md5對應的是md5,react-native-swiper這個是輪播圖)
3.怎么導入第三方庫?
npm i xxx --save
比如npm i react-timer-mixin --save (--save的意思是把這個導入信息寫入到package.json的dependencies里)
4.第三方庫怎么用?
在node_modules目錄下找到對應的庫的README.md這里會有用法
Podflie 文件 一般放在項目根目錄,將下面代碼粘貼到你的Podflie里
platform :ios, "8.0"
use_frameworks!
target "xxx" do
# 取決于你的工程如何組織，你的node_modules文件夾可能會在別的地方。
# 請將:path后面的內容修改為正確的路徑（一定要確保正確～～）。
pod "Yoga", :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => './RNComponent/node_modules/react-native', :subspecs => [
'Core',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTAnimation',
]
end
注意:
1.target名字換成你的項目,務必英文
2.subspecs后面是你需要的RN庫,用什么導入什么
3.path路徑不要寫錯需要導入到node_modules目錄下
4.然后在終端cd到項目目錄 pod install
可能出現警告的情況,一定不要忽略,會導致項目無法編譯
然后打開工作空間編譯一下,可能還是編譯不過去在target-build setting里設置一下
三.
這個時候該導入的都導入進去了,這時候你還需要一個入口文件index.ios.js和index.android.js.
現在的目錄結構,只導入了index.ios.js
這時先切換到RNComponent目錄下,npm start打開本地服務器
現在可以跑一下了command+R.如果跑通不了,基本上是文件鏈接錯誤,出現這個問題就是導入的時候有環節不對.
1.在index.ios.js里寫一些代碼看看效果,
2.然后在你想熱更新的界面寫上如下代碼
NSString * strUrl = @"http://你的IP:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
/**
參數一：加載頁面的地址可以理解為（熱更新鏈接）
參數二：項目名稱
:returns:
*/
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"xxxx"
initialProperties:@{@"index" : @"main"}
launchOptions:nil];
self.view = rootView;
1.moduleName:注冊名
AppRegistry.registerComponent('ListViewDemo3', () => ListViewDemo3);
這個的moduleName 就是ListViewDemo3
2.initialProperties:一個對象,在index.ios.js 這么取var index = this.props['index'];對應的value 就是main這個模塊.
3.ip需要換成你對應的ip,怎么找?在系統偏好設置->網絡,這時候你就可以本地調試了
以上基本算是嵌入到項目里了
總結:記錄一下自己的心得,坑還是不少的,每個踩過的坑就是經驗,其實寫的不是很細致,很多東西展開的寫其實很多,學習RN最好是有前段的基礎html+css+js +nodeJS,前期先學習RN項目,之后再研究如何將RN嵌入到項目中.
如果有錯誤,往指正!
