React Native世界的"Hello World"

參考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的文件夾了


生成了你的第一個項目文件夾


我們打開這個文件夾可以看到

工程的結構長成這個樣子,這是啥子?我們先不去考慮,看能不能跑起來。


RN文件目錄


我們進入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,隨手重新運行了一下就好了沒記錄到錯誤原因)


我們看到終端為我們打開了一個ReactPackager

這個操作會同時打開一個用于實現動態代碼加載的Node服務(React Packager)。所以每當你修改代碼,你只需要在模擬器中按下?+R,而無需重新在XCode中編譯。


模擬器中出現WelcomeToReactNative字樣

完成“Hello World”的程序運行,見到RN世界的world,讓我們嘗試更改內容,再次跑一下。


打開index.ios.js文件進行JS代碼的編輯

(這里有朋友推薦IDE使用Sublime來編輯代碼,需要的朋友可以去下載下free)


我們看到React.js的代碼

更改其中的文本內容為“從零開始學習ReactNative!”

在模擬器界面直接Command + R


完成更改

按下Cmd+D后出現調試菜單,我們在以后會進行了解。


按下Cmd+D后出現調試菜單

完成Hello World 任務。我們開始進入下一階段的探索。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,619評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,155評論 3 425
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,635評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,539評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,255評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,646評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,655評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,838評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,399評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,146評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,338評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,893評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,565評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,983評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,257評論 1 292
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,059評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,296評論 2 376

推薦閱讀更多精彩內容