前言

大前端貌似已經是一種趨勢了，現在開始入坑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’！ 復制代碼

總結

其實走完上述步驟，已經完成了初體驗。怎么說呢？一句話，要學的知識還有很多！復制代碼

總結

以上是生活随笔為你收集整理的React-Native入门（1）-项目工程初识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。