深入淺出React Native 2: 我的第一個應用

來源:互聯網
上載者:User

標籤:

這是深入淺出React Native教程的第二篇文章,第一篇為環境配置。

React Native環境配好之後,就可以開始建立我們的第一個App啦。

開啟控制台,輸入

react-native init AwesomeProject

上述命令的作用是在當前檔案夾下建立一個名字叫AwesomeProject的項目模板。在運行該命令之前,可以先用cd命令到自己想建立react native的檔案夾下。

當然,比較坑的是,執行這個命令會用耗費很長很長的時間,有時候還會出現各種各樣的錯誤,例如,沒有許可權。所以在我們這次教程中,直接拿一個初始的項目來修改使用。地址如下:

github: https://github.com/CellChen/react-native-init

下載下來之後,找到tar檔案夾,裡面就是我們需要用到的項目了。

專案檔如下所示:(該教程主要是iOS開發,所以先忽略andorid相關的,其實android與iOS的目錄類似。)

可以看出項目主要由index.ios.js以及ios項目組成。

開啟控制台,確保當前控制台所指向的目錄是AwesomeProject,輸入

npm start

 

該命令主要是啟動開發使用的本機伺服器。

當伺服器啟動後,就可以用xcode開啟ios項目,編譯、運行,就可以看到這個最最最最最初始的項目啦~~

我們可以嘗試修改下index.ios.js檔案看看效果~

用檔案編輯器(個人還是比較推薦使用sublime,好看、好用、外掛程式多~)開啟index.ios.js,可以看到如下的代碼:

將第20行代碼修改成 "這個是我第一個React Native的應用"

切換回iphone模擬器,CMD+R重新整理,可以看到模擬器上的標題改成我們最新修改的文字了~(如果CMD+R重新整理後看到的還是以前的文字的話,可以嘗試將伺服器停掉再重新開啟~)

好啦,以上就是我們的第一個React Native應用了,如果對項目裡的代碼不理解,也沒關係,後續會慢慢解釋的~

深入淺出React Native 2: 我的第一個應用

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.