React Native 學習筆記(一)---Hello, New World!

React Native 學習筆記(一)—Hello, New World!

Taylor Guo, 2017年9月8日

因爲需要開發一款app,沒有任何移動端開發和前端開發經驗,只需要結果。先看了Swift,雖然比OC簡單很多,但仍然不那麼直覺。Swift從零開始,估計有經驗的人也需要2個月的時間,更何況是我這種沒有任何現代語言經驗的人了。

和一個後端同事交流了一下,他建議說用React Native上手快,開發便利,先不管坑不坑兒的了,不管三七二十一,直接上來就幹。

B站上看了一天教學視頻,感覺RN上手比較快,又符合直覺,又在GitHub上看了一下對UI的支持,覺得應該能把自己需要的APP做出來。所以今天晚上就開始搭建系統了。


系統搭建

直接參考了中文官網教程

結果,一上來就給了我一個下馬威,模擬器無法正常運行,Helloworld程序也無法打開。

錯誤提示如下:
react-native啓動報錯-Print: Entry, “:CFBundleIdentifier”, Does Not Exist

問題:
一直沒有找到答案;

百度+Google後,在慕課網上看到別人的分析,
聯想到之前Ubuntu下面調試C++項目;

幹活之前,必先祭系統:

  • 更新:brew update 這會更新 Homebrew 自己,並且使得接下來的兩個操作有意義——

  • 檢查過時(是否有新版本):brew outdated 這回列出所有安裝的軟件裏可以升級的那些

  • 升級:brew upgrade 升級所有可以升級的軟件們

  • 清理:brew cleanup 清理不需要的版本極其安裝包緩存

更新之後還是沒有找到答案。

於是再次尋找答案:React Native版本有問題。

按照方案一:修改了package.json文件中的版本信息。仍然提示錯誤。


根據命令行提示進行操作:

1.lsof -n -i4TCP:8081 列出被佔用的端口列表

2.kill -9 找到與之對應的PID然後刪除即可

3.重新運行項目 react-native run-ios


如果還有一下問題:

PhaseScriptExecution Install\ Third\ Party /Users/taylorguo/Documents/React-Native/QiQiabc/QiQiabc/ios/build/Build/Intermediates/React.build/Debug-iphonesimulator/double-conversion.build/Script-190EE32F1E6A43DE00A8543A.sh

(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/QiQiabc.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, “:CFBundleIdentifier”, Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/QiQiabc.app/Info.plist
Print: Entry, “:CFBundleIdentifier”, Does Not Exist

針對iOS React Native 0.45版本以後,這是因爲第三方庫的問題,沒有安裝好。

通過third party .sh文件可以看到他們需要的第三方庫,下載即可。

這裏寫圖片描述

將下載的庫拷貝到~/.rncache目錄下即可

cd ~
mkdir .rncache
這裏寫圖片描述

也可以參考:
iOS RN 0.45以上版本所需的第三方編譯庫(boost等)


改用方案二
用–version參數創建指定版本的項目。
react-native init Demoapp –version 0.44.3 版本號必須精確到兩個小數點

至此,React Native終於運行成功!
這裏寫圖片描述


也可以使用create-react-native-app來創建App。

這裏寫圖片描述

參考資料:

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