本次用于教學(xué)的開發(fā)設(shè)備為Mac mini M1芯片

系統(tǒng)版本為macOs Big Sur 11.0.1

Xcode 12.3

Android Studio 4.1.1

1. 安裝node環(huán)境

到官網(wǎng) http://nodejs.cn/download/ 下載node的安裝包账忘，目前最新版本為14.15.1

nodejs.cn

下載后雙擊安裝即可志膀，無需手動配置環(huán)境變量

安裝成功后在終端可以查看node和npm的版本

node and npm

2. 給npm換上淘寶的源

npm config set registry https://registry.npm.taobao.org

3. 用npm安裝yarn

npm install -g yarn

4. 給yarn更換源

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

5. 用gem安裝cocoapods

sudo gem install cocoapods

6. 用npx命令創(chuàng)建項目

注意：
由于M1芯片的兼容性問題，cocoapods在這一步安裝依賴的時候可能會報錯鳖擒，需要在終端上【右鍵】-【顯示簡介】-【勾選使用Rosetta打開】

image.png

image.png

npx react-native init Project

初始化項目時間較長梧却，請耐心等待，主要是cocoapods下載依賴的時間較長

如果中途中斷了败去，或者等待時間太長無反應(yīng)，需要到ios目錄中執(zhí)行

pod install

如果依然無法成功安裝依賴烈拒，需要開啟代理軟件圆裕，然后執(zhí)行下面兩行命令，使當前終端走代理網(wǎng)絡(luò)荆几，我的代理軟件給到的端口是4780

image.png

export http_proxy="http://127.0.0.1:4780"
export https_proxy="http://127.0.0.1:4780"

當依賴安裝成功后吓妆，會在ios目錄下看到一個白色圖標的工程文件

ios.png

如果 pod install 出現(xiàn) pod install SDK "iphoneos" can not be located 錯誤，在命令行執(zhí)行下面的命令可以解決吨铸。

sudo xcode-select --switch /Applications/Xcode.app

Xcode模擬器調(diào)試

雙擊上圖的白色工程文件行拢，Xcode將會打開工程。然后隨便選擇一個模擬器把他運行起來

xcode.png

ios.png

用 vscode 打開項目诞吱，其中 android 目錄放置的是安卓原生的項目文件舟奠，ios 目錄放置的是IOS的原生項目文件，index.js 為項目的入口文件房维，他引入了一個用于演示的頁面文件 App.js沼瘫。我們來修改這個 App.js 文件看一下效果

app.png

demo.png

模擬器 command + D 然后選擇 Debug 可以打開調(diào)試模式，打開后可以在瀏覽器端查看打印控制臺

debug.png

debug.png

Xcode真機調(diào)試

將手機通過數(shù)據(jù)線連接至電腦咙俩，首次連接會在手機上彈出一個信任設(shè)備的提示耿戚，這里一定要選擇【信任】

信任后就可以在xcode上看到你的設(shè)備了

iphone.png

首次連接可能沒有配置證書，需要在你的 Signing 中添加一個證書

image.png

輸入你的Apple ID登錄

image.png

登錄之后就可以看到一個免費的證書

image.png

然后回到 Signing 中選擇這個證書

image.png

這個時候下面有可能還會報一個 identifier 的錯誤，這是因為我們的 Bundle Identifier 已經(jīng)被別人使用了膜蛔，我們需要重新起一個沒有被用過的名字就可以了

image.png

然后我們就可以將 APP 安裝到手機上了坛猪，但這里需要注意。

雖然這時 APP 成功安裝到了手機上皂股，但卻不能正常打開墅茉，Xcode 會提示你要在手機中設(shè)置對該APP的信任

image.png

點擊【設(shè)置】【通用】【設(shè)備管理】選擇開發(fā)者APP中對應(yīng)的你的APP，選擇信任

image.png

image.png

之后就可以正常打開APP了屑墨。

Android Studio 真機調(diào)試

由于我們的開發(fā)環(huán)境為 Mac OSX 躁锁，所以 Xcode 只需要在 App Store 中點擊安裝就可以了，無需配置任何內(nèi)容卵史，非常簡單战转。

但是安卓的開發(fā)環(huán)境配置起來就比較復(fù)雜了浑槽，但沒關(guān)系桩匪，只要跟著我下面的步驟來，很快就可以配置好你的開發(fā)環(huán)境掖蛤。

首先下載 JDK忧设，下載地址：https://www.androiddevtools.cn/#

JDK.png

選擇 Mac OSX 1.8 版本的 JDK

image.png

下載完成后雙擊下一步下一步安裝就可以了刁标，會自動將環(huán)境變量配好。

在終端中輸入 java -version 出現(xiàn)如下字樣表示安裝成功址晕。

image.png

然后是下載 SDK膀懈，下載地址：https://www.androiddevtools.cn/#

image.png

image.png

下載完成后找一個地方解壓出來，待會兒會用到谨垃。

然后下載 Android Studio ,下載地址： https://developer.android.google.cn/studio

android studio.png

安裝完成之后首次打開會提示讓你選擇一個SDK的路徑启搂，這時上面的那個就用到了。我將我的SDK都放置到了文稿中的AndroidSDK目錄中刘陶，這里根據(jù)自己的情況自行調(diào)整胳赌。

image.png

然后在 Android Studio 中打開 Preferences 選擇 SDK Tools 并勾選 Show Package Details

image.png

image.png

勾選一些需要的SDK版本并下載

接下來是配置環(huán)境變量，cd 到根目錄下打開.bash_profile文件匙隔，如果沒有就創(chuàng)建一個

cd ~
open .bash_profile

將這些統(tǒng)統(tǒng)添加進去疑苫，要根據(jù)自己的實際路徑添加。

export ANDROID_HOME=/Users/zhangyu/Documents/AndroidSDK
export PATH=${PATH}:/Users/zhangyu/Documents/AndroidSDK/platform-tools
export PATH=${PATH}:/Users/zhangyu/Documents/AndroidSDK/tools
export PATH=${PATH}:/Users/zhangyu/Documents/AndroidSDK/tools/bin
export PATH=${PATH}:/Users/zhangyu/Documents/AndroidSDK/emulator

保存之后執(zhí)行下面的命令纷责，使環(huán)境變量生效

source .bash_profile

確保手機打開了USB調(diào)試模式捍掺，并用數(shù)據(jù)線連接到電腦。

image.png

可以看到已經(jīng)正常識別到了設(shè)備

但是這時在 Android Studio 上點擊運行后會在手機上報這個錯

image.png

這是因為 adb 的端口和手機的端口不一致導(dǎo)致的

我們在終端中輸入下面的命令再膳，重新指定一下端口

adb reverse tcp:8081 tcp:8081

然后搖一搖手機乡小，在彈出的窗口中選擇 Settings

image.png

然后選擇這一項

image.png

然后打開網(wǎng)絡(luò)偏好設(shè)置，查看一下分配到電腦的ip地址

image.png

image.png

將這個ip地址加上8081端口填入

image.png

Android Studio 編譯成功后饵史，命令行執(zhí)行 yarn android 就可以正常運行在Android設(shè)備上了满钟。