1.安裝node
node.js官網(wǎng)
需要確定自己安裝的版本是否是12版本以上
node -v
?2.安裝yarn
npm install -g yarn
3.安裝 Android Studio
這是官網(wǎng)推薦的安裝地址:
android studio
國內用戶可能無法打開官方鏈接，請自行使用搜索引擎搜索可用的下載鏈接。安裝界面中選擇"Custom"選項，確保選中了以下幾項：
所以需要我們自己想辦法來安裝.
給大家分享一個百度網(wǎng)盤地址,里面有我們需要的軟件:
鏈接: https://pan.baidu.com/s/1c8AgOvyqWHquDl76oH5Rhg 提取碼: f67p
?解壓完之后可以看到這幾個軟件:
JDK的安裝比較簡單,這里附上一個鏈接,直接下載安裝就行:
Java SE Development Kit
下載的時候需要注冊及登錄,這點要注意.
需要雙擊安裝第二個軟件
?安裝完這個軟件后,可以搜索Android Studio,然后安裝
?安裝好后看看是否能打開Android studio,如果打不開的話,就需要修改自己電腦的代理了.
最好是驗證一下自己的代理是否可以使用.?
打開是這個頁面展示:
如果沒有完整顯示,可以配置一下代理:
?
點擊ok看下代理的端口是否可以成功,如果不成功,證明代理的地址還是無法訪問.
如果成功的話,點擊保存,然后繼續(xù)重啟?Android studio.
我自己安裝的時候,由于之前安裝過,一下子就進入到了項目里,這個我暫時沒搞明白,
?4.?安裝 Android SDK
在 SDK Manager 中選擇"SDK Platforms"選項卡，然后在右下角勾選"Show Package Details"。展開
Android 13 (Tiramisu)選項，確保勾選了下面這些組件（重申你必須使用穩(wěn)定的代理軟件，否則可能都看不到這個界面）：
Android SDK Platform 33Intel x86 Atom_64 System Image（官方模擬器鏡像文件，使用非官方模擬器不需要安裝此組件）
?
這些依賴都是必須要安裝的.
5. 配置 ANDROID_HOME 環(huán)境變量?
以下來自于React Native的官網(wǎng)描述:
React Native 需要通過環(huán)境變量來了解你的 Android SDK 裝在什么路徑，從而正常進行編譯。
打開
控制面板?->?系統(tǒng)和安全?->?系統(tǒng)?->?高級系統(tǒng)設置?->?高級?->?環(huán)境變量?->?新建，創(chuàng)建一個名為ANDROID_HOME的環(huán)境變量（系統(tǒng)或用戶變量均可），指向你的 Android SDK 所在的目錄（具體的路徑可能和下圖不一致，請自行確認）：
變量名就用?ANDROID_HOME,變量值是下方箭頭指示這個:
6.把一些工具目錄添加到環(huán)境變量 Path
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin?
創(chuàng)建新項目?
npx react-native init AwesomeProject
創(chuàng)建完成:
這個是我截的圖,正常的話此處的設備需要我們自己添加.
然后點擊創(chuàng)建我們自己的機器,就以箭頭所示的機型為例:
?
點擊Next
一個安卓模擬器就運行起來了,下方所示:
編譯并運行 React Native 應用?
確保你先運行了模擬器或者連接了真機，然后在你的項目目錄中運行yarn android或者yarn react-native run-android：
cd AwesomeProject
yarn android
# 或者
yarn react-native run-android
如果報錯了,可以再執(zhí)行一遍啟動命令.這個其實是報了一個錯誤,我們只要在相關文件加一句代碼:
重新執(zhí)行運行命令:
?這樣就編譯成功了.
當你修改代碼后,可以通過下方箭頭的方式刷新頁面,最快的方式就是點擊兩次R鍵
安卓手機因為機型很多,所以還可以添加很多不同的機型:
?注意:window電腦只能搭建安卓開發(fā)環(huán)境,iOS開發(fā)環(huán)境只能搭建沙盒環(huán)境.專門搭建iOS開發(fā)環(huán)境的話,只能選擇Mac本了.
參考文獻:
迄今為止最詳細的react-native環(huán)境安裝攻略
搭建開發(fā)環(huán)境文章來源：http://www.zghlxwxcb.cn/news/detail-443881.html
安裝 Android Studio詳解文章來源地址http://www.zghlxwxcb.cn/news/detail-443881.html
到了這里，關于搭建React Native開發(fā)環(huán)境的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
