React Native初體驗

初步學習React Native

之前學習了混合式開發框架IONIC,發現這個上手很快,因爲大部分控件框架中都有提供了,然後看到了React Native ,它充分利用了Facebook的現有輪子,是一個非常優秀的集成作品,而且現在適用性來說,React Native 是比 IONIC 更廣爲人知的,所以這裏打算開始學習下,一方面可以拓展自身的知識面,另一方面學習的過程中也可以將 它們兩者進行一個對比,從中選擇更適合自己的開發方式。
這裏先推薦兩個學習網址:
第一個毫無疑問是官網了,第二個是React Native中文學習網站,裏面有對官網的翻譯,也有一些額外的教程。

搭建環境:

學習之前必然要先搭建運行環境了,由於我之前學習 IONIC ,一些基本的環境已經搭建好了,這裏就不再描述,詳細的可以查看上面推薦的中文學習網站,裏面已經寫得十分詳細了。

生成並運行項目

在node.js中輸入下面的命令操作:
**react-native init AwesomeProject
cd AwesomeProject
react-native run-android**
這裏如果你比較幸運的話就可以在手機上看到運行效果了,當然往事開頭難,一開始難免會遇到各種各樣的問題。

問題一:

Unable to load script from assets ‘index.android.bundle’……

這裏寫圖片描述

這個問題的關鍵在於缺少了 index.android.bundle 這個文件,然後各種百度也說是在android目錄下缺少了assets文件夾,然後沒有生成對應的index.android.bundle這個文件,然後網上給出的解決方法如下:
第一步:在Android/app/src/main目錄下創建一個空的assets文件夾,
第二步:進入項目根目錄執行下面代碼:
react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
但是你在輸入上面這串代碼的時候會發現還是報錯,因爲項目裏面根本沒有所謂的 index.android.js 文件,下面是這個項目的根目錄:

這裏寫圖片描述

這時候又各種百度這個文件是什麼,然後有人說了新版本沒有了index.android.js 和 index.ios.js ,整合到了App.js 裏了,一看目錄的確有一個 App.js 的文件,抱着試一下的心態,我將上面的 index.android.js 換成了 App.js :

react-native bundle –platform android –dev false –entry-file App.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/

的確在assets目錄下生成了兩個文件,這時候心裏一陣狂喜,終於搞定了,然後滿懷激情的輸入了, react-native run-android, 結果出乎意料又在情理之中的還是報錯了,好吧果然沒有什麼事可以隨隨便便成功。既然bug出現了,那就只能去解決了。
bug如下:

這裏寫圖片描述

然後又是各種百度(原諒我,最近敏感時期,梯子都不好用了),結果試了各種所謂的解決方法還是沒有任何效果,在我即將心灰意冷的時候突然想到會不會是我上一步就出錯了,assets生成的文件本身就是錯的。之後我再目錄裏面仔細的搜索,又發現了一個 index.js 文件,想到已經沒有什麼其他辦法了,只能重新嘗試一下了,於是乎我把第二步的命令行改成了下面這個:

react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/

只是將其中的 App.js 替換成 index.js ,運行後發現是可以的,也有生成對應的文件,再運行下 react-native run-android 發現竟然可以了。簡直要喜極而泣。終於把項目跑起來了。
第三步:重新運行後就可以了。

這裏將問題記錄了下,一方面是自己可以查看,另一方面也希望能幫到其他人少走彎路。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章