react-native 啟動項目

找了很多的資料,react native 的資料本來就少,結果關于 android 的更少,與項目啟動有關的就少之又少了,所以我要趕緊記錄下來,以免忘記。

項目創建完成后,用自己喜歡的編輯器打開,我喜歡用的編輯器是 webstorm,

簡單明了,有一個 tests 文件夾,一個 android 文件夾,毋庸置疑,是 android 用的,一個 ios 文件夾,是 ios 用的,還有 index.android.js 和 index.ios.js ,android 和 iOS 的啟動程序都是寫在這里的。

下面就是如何啟動項目了。

親測,iOS 啟動很簡單,在 ios 文件夾下 有 reactNativeProject.xcodeproj 該文件夾用Xcode 打開,沒有 Xcode 就先趕緊去安裝吧, 就在 App store 中就有,下載起來頗費時間。

xcode 啟動起來了,這個時候電腦已經卡爆了!!!

這個地方是可以選擇機型的,我選擇的是 iphone7,run 起來后,帶著手機的這個東西就會出現:

剛開始啟動起來時,虛擬機簡直巨大無比,后來找了半天調節的地方。在虛擬機的 window下面,我選擇的是 50%, 這個時候整個大小就是手機一般了。

手機出來后,滑動手機找到我們的項目程序軟件,點擊打開。

雖然啟動的很慢,但最終還是打開了。

相對于 iOS, android 的就坑爹的多了。

android 的打開方式有很多種, 一種是命令行,把手機連在電腦上,并打開 USB 調試模式,在終端進入該項目, react-native run-android 就可以了,但是我的跑了半天,終端做了很多動作,最后竟然告訴我未啟動,而我也不明原因,搗鼓了好久也沒反應。在我都快放棄的時候,靈光乍現,既然 ios 的就可以用 Xcode 打開,那 android 的是否就能用 android studio 打開呢,結果一試,還真是這樣。

用 android studio 打開 android 文件夾,然后 run 就可以了。

但是 android 坑多,我現在總結的是我遇到的問題。

首先是啟動不起來,android studio 控制臺報錯: 反正原因是支持的最小版本不統一。然后我找了半天,發現在 AndroidManifest.xml 中和在 build.gradle (這里有兩個build.gradle,但是只有一個里面有最小版本的限制)中,最小版本限制不統一,一個是14,一個是16,最后我都改成了16,Rebuild 了一下項目,再次跑起來時就沒有報錯了。

但是這并沒有結束,手機打開程序之后,顯示空白。這里需到手機里修改權限設置,將懸浮窗權限放開,每個品牌的手機打開權限方法都不同,所以這里就不羅列了。

再次打開軟件,火紅的界面,明顯在報錯嘛!

找了半天,網上也有解決辦法,不過命令行的那個對我不起作用,而是在 package.json 中修改了scripts 中的代碼,最后修改后的如下:

"scripts":?{

"build":"(cd?android/?&&?./gradlew?assembleDebug)",

"start":"node?node_modules/react-native/local-cli/cli.js?start",

"test":"jest",

"bundle-android":"react-native?bundle?--platform?android?--dev?false?--entry-file?index.android.js?--bundle-output?android/app/src/main/assets/index.android.bundle?--sourcemap-output?android/app/src/main/assets/index.android.map?--assets-dest?android/app/src/main/res/"

},

再次重啟軟件,為了保險,我先 rebuild 了一下,這次終于正常啟動了。

界面和 ios 的一樣。

還有一點需要注意,react-native 記得跑起來。

辦法很簡單:cd 進項目包

react-native start ?就可以了。

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

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,595評論 25 707
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,147評論 4 61
  • 外面下著瓢潑大雨,絲絲冷風從窗棱倏忽而過。我們倆坐在床上,她在縫衣服, 我在幫忙打燈。她說她要走了,一個人別害怕。...
    沒煩惱要睡覺閱讀 817評論 0 0
  • 序言 作為一個Web開發人員,相信對框架并不陌生。那么什么是Web框架呢?我們學習的語言中有哪些框架呢?帶著這兩個...
    盞茶_作酒閱讀 1,460評論 2 4
  • 來自野火無盡生第26天作業,一萬小時理論。想起來還有一個一千小時理論,花一千小時就可以達到入門,超過大多數人。如果...
    野火無盡生閱讀 420評論 0 0