按照傳統,搭建完環境之后就可以寫第一個demo了,俗稱helloWorld。
一、環境搭建的地址:
http://reactnative.cn/docs/0.47/getting-started.html#content
這個地址是官方的,真的很詳細,照著做就對了。
二、運行
打開終端,cd到你想要放置demo的位置,然后運行如下命令:
react-native init HelloWorld --version 0.44.3
cd HelloWorld
react-native run-ios
這里解釋下,為什么要加版本號。官方給出的說法是:
注意:init命令默認會創建最新的版本,而目前最新的0.45及以上版本需要下載boost庫編譯。此庫體積龐大,在國內即便翻墻也很難下載成功,導致很多人無法正常運行iOS項目,中文網在論壇中提供了這些庫的國內下載鏈接。如果你嫌麻煩,又沒有對新版本的需求,那么可以暫時創建0.44.3的版本。
提示:如果run-ios無法正常運行,請使用Xcode運行來查看具體錯誤(run-ios的報錯沒有任何具體信息)。
注意:這里是默認使用模擬器運行項目的,運行效果如下:
image.png
但是,使用RN調試的時候需要搖動手機,這個時候使用模擬器不是很方便,用真機比較好。如何在真機上運行呢?
真機運行鏈接:
http://reactnative.cn/docs/0.47/running-on-device-ios.html#content
真機運行成功之后,搖一搖手機,界面如下:
IMG_0394.PNG
這個時候,xcode不要停掉,不要停掉,打開項目中的index.ios.js這個文件,改改文字還是可以的。
這個文件隨便截兩張圖看看
image.png
image.png
我們雖然并不能完全看得懂每行代碼的意思,但是改改文字和樣式還是可以的啊。
image.png
顯示效果如下:
IMG_0393.PNG
改改樣式:
image.png
顯示如下:
IMG_0395.PNG
OK,我們的第一個簡易的holloworld就算完成啦。