前言
大前端貌似已經是一種趨勢了,現在開始入坑RN。以後會把填坑的過程記錄下來,分享給大家。
宣告一下,本文不屬於零基礎學習,如果遇見不懂請自行學習相關知識。
複製程式碼
環境搭建
請參考官網:https://reactnative.cn/docs/0.51/getting-started.html#content(文件)
如果你不習慣看文件,也可以觀看視訊http://study.163.com/course/introduction.htm?courseId=1003848134(整套課程是收費的,不過環境篇是免費的)
複製程式碼
編譯執行
廢了九牛二虎之力,終於把環境配好了,很激動有木有?emmm…… 問題接踵而至
來來來,我們一起看看這個工程吧!
首先執行操作如下:
複製程式碼
react-native init HelloWorld #新建一個叫做‘HelloWorld的工程’
cd HelloWorld #進入這個工程
react-native run-android #使用android環境編譯
如果出現下圖:
複製程式碼
請不要緊張,這張圖表示你的編譯已經成功了,由於你沒有連線android機器,導致apk安裝失敗了(具體請看紅色的英文提示)。
然後我們接上手機,重新執行
複製程式碼
react-native run-android
安裝成功後,你就會看見下圖:
說好的‘HelloWorld’哪裡去了?彆著急,請先注意這一段英文:
'Double tap R on your keyboard to reload,'Shake or press menu button for dev menu'
翻譯一下:雙擊鍵盤上的R鍵來重新載入,搖晃或者點選功能按鈕來開啟開發選單 再翻譯成人話一點兒,就是你修改了程式碼(目前只修改了Js程式碼,至於原生程式碼修改我們先不涉及),不用每次都去編譯,雙擊R或者調出選單點選重新載入就可以看到最新效果了。
What is the fuck?點選reload出現瞭如下提示:
複製程式碼
這是嘛情況呢?
別慌,人家提示寫的很清楚‘Could not connect to development server.’
趕緊檢查一下你本地那個node.js視窗是不是被你關閉了?
執行:
複製程式碼
react-native run-android
就可以重新開啟下面這個服務了:
小知識點:
這裡先簡單的提一些,能理解多少算多少吧!node.js這個介面,其實是開啟了一個本地服務,佔用了8081埠。
這個服務幹嘛用的呢?它其實讓app去更新你的js程式碼,你每次reload的時候,就是通過服務在更新js檔案,如下圖:
複製程式碼
專案工程簡述
環境什麼的都弄好了,大家都急於自己的‘HelloWorld’。按照以往的經驗,開啟android目錄找到MainActivity上手就開始改了,然後…… 對,沒有然後了!
來來我們一起簡單看一下專案結構吧!
使用軟體:WebStorm
複製程式碼
1、android目錄是用來呼叫android本地化元件的暫時不用研究(同理ios目錄)
2、node_modules目錄,是rn的程式碼元件
3、index.js索引,程式載入的入口
4、package.json工程配置檔案(類似AndroidStudio工程的build.gradle檔案)
5、app.json專案資訊檔案
6、App.js 這個就是你看到的展示介面(‘HelloWorld’就在裡面改)
相信凡是有過一定程式設計基礎的人,都會改出自己的‘HelloWorld’!
複製程式碼
總結
其實走完上述步驟,已經完成了初體驗。怎麼說呢?一句話,要學的知識還有很多!複製程式碼