React Native學(xué)習(xí)筆記(1) 環(huán)境配置，項目結(jié)構(gòu)，開發(fā)環(huán)境結(jié)構(gòu)

概述

新接觸 React Native,本文算是個筆記

環(huán)境配置

創(chuàng)建項目

環(huán)境配好后，就可以在命令行提示符下使用 react-native 指令了，下面是一些常用指令

創(chuàng)建項目

react-native init AwesomeProject   //AwesomeProject是項目名

啟動 Node.js web server

react-native start

啟動android

react-native run-android

啟動ios

react-native run-ios

開發(fā)環(huán)境的組成

  • 一個node.js 的開發(fā)服務(wù)器，在開發(fā)階段，我們的電腦上需要開啟這個web服務(wù)，以使得在模擬器中可以顯示內(nèi)容。當(dāng)我們更改了js源代碼后，也能及時的在模擬器里看到。
  • 模擬器設(shè)備，就是我們開啟的Android或者IOS虛擬機
  • jsBundle 開發(fā)者寫的源代碼打包而成，在開發(fā)階段更改js文件會自動更新到模擬器。而在發(fā)布最終版的，我們需要手動打包（離線包）這個jsBundle到apk或者IOS安裝包內(nèi)。網(wǎng)上還有一些“熱更新”的方案。
開發(fā)環(huán)境的組成

項目結(jié)構(gòu)

項目結(jié)構(gòu)圖

如上圖所示，我們看看項目文件下都有什么

  • android文件夾,這里是 android 工程的源代碼，我們可以使用android studio 打開這個文件夾
  • ios文件夾，這里是 iso的項目工程的源代碼，可以用xcode打開
    +node_modules ，是react-native工程用到的模塊
  • index.android.js 是android的 頁面的內(nèi)容，主源代碼文件
  • index.ios.js 是ios 的 頁面的內(nèi)容，主源代碼文件
  • package.json 工程描述文件

啟動應(yīng)用

  1. 進到你的項目根目錄，比如 cd AwesomeProject //AwesomeProject是項目名
  2. 在命令提示符輸入： react-native start 啟動服務(wù)
  3. 執(zhí)行 react-native run-android 啟動android ，稍等片刻就可以在Android模擬器里看到頁面了
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容