參考React Native 中文網的文檔來進行操作
http://reactnative.cn/?
首先我們不管我們會不會前端知識,我們需要看到一個可以跑起來的程序,讓我們在理解它之前先見到它!那么我們開始按照文檔來搭建RN的環境。
一.環境需求
1.OS X - 本向導假設您的操作系統是OS X,因為這是開發iOS應用所必須的。
2.推薦使用Homebrew來安裝Watchman和Flow
3.安裝Node.js4.0或更高版本(譯注:如果你并不使用Node.js開發網站,只是用于React Native的開發,那么請先安裝homebrew,然后直接使用brew install node安裝即可,不必按照下面的nvm的安裝步驟)
//如果只是想要ReactNative 不需要做(1)(2);
? ? ? ?(1)安裝nvm(安裝向導在這里)。然后運行nvm install node && nvm alias default node,這將會默認安裝最新版本的Node.js并且設置好命令行的環境變量,這樣你可以輸入node命令來啟動Node.js環境。nvm使你可以可以同時安裝多個版本的Node.js,并且在這些版本之間輕松切換。
? ? ? (2) 如果你從未接觸過npm,推薦閱讀npm的文檔
4.在命令行中輸入brew install watchman,我們推薦安裝watchman,否則你可能會遇到一個Node.js監視文件系統的BUG。
5.如果你希望使用flow來為js代碼加上類型檢查,那么在命令行中輸入brew install flow來安裝flow。(譯注:新手可以跳過這一步)
我們推薦您定期運行brew update && brew upgrade來保持上述幾個程序為最新版本。
2.快速開始
//執行時候記得去掉$
$ npm install -g react-native-cli
$ react-native init AwesomeProject
譯注:由于眾所周知的網絡原因,react-native命令行從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像:
npm configsetregistry https://registry.npm.taobao.org
npm configsetdisturl https://npm.taobao.org/dist
另,執行init時切記不要在前面加上sudo(否則新項目的目錄所有者會變為root而不是當前用戶,導致一系列權限問題,請使用chown修復)。
這個init真的要等很久,我換了姿勢也沒變快所以大家多等等吧。
init后面就是初始化的文件夾名稱 至于這個Awesome是有什么意義并沒明白,希望有人能指出.
然后你再你的目錄下就可以看到這個叫做AwesomeProject的文件夾了
我們打開這個文件夾可以看到
工程的結構長成這個樣子,這是啥子?我們先不去考慮,看能不能跑起來。
我們進入ios文件夾中(喂iOS可好?)
依然是熟悉的它們,習慣性地點開。
我們進入AppDelegate.m去看NR做了什么?
我們看到在完成加載的方法中RN這樣達到了顯示的效果。
NSURL*jsCodeLocation;
/**
* Loading JavaScript code - uncomment the one you want.
*
* OPTION 1
* Load from development server. Start the server from the repository root:
*
* $ npm start
*
* To run on device, change `localhost` to the IP address of your computer
* (you can get this by typing `ifconfig` into the terminal and selecting the
* `inet` value under `en0:`) and make sure your computer and iOS device are
* on the same Wi-Fi network.
*/
jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
/**
* OPTION 2
* Load from pre-bundled file on disk. The static bundle is automatically
* generated by "Bundle React Native code and images" build step.
*/
//jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:launchOptions];
self.window= [[UIWindowalloc]initWithFrame:[UIScreenmainScreen].bounds];
UIViewController*rootViewController = [UIViewControllernew];
rootViewController.view= rootView;
self.window.rootViewController= rootViewController;
[self.windowmakeKeyAndVisible];
好我們Run一下程序。(我第一次運行的時候出現提示watchman的error,隨手重新運行了一下就好了沒記錄到錯誤原因)
這個操作會同時打開一個用于實現動態代碼加載的Node服務(React Packager)。所以每當你修改代碼,你只需要在模擬器中按下?+R,而無需重新在XCode中編譯。
完成“Hello World”的程序運行,見到RN世界的world,讓我們嘗試更改內容,再次跑一下。
(這里有朋友推薦IDE使用Sublime來編輯代碼,需要的朋友可以去下載下free)
更改其中的文本內容為“從零開始學習ReactNative!”
在模擬器界面直接Command + R
按下Cmd+D后出現調試菜單,我們在以后會進行了解。
完成Hello World 任務。我們開始進入下一階段的探索。