本次用于教学的开发设备为Mac mini M1芯片
系统版本为macOs Big Sur 11.0.1
Xcode 12.3
Android Studio 4.1.1
1. 安装node环境
到官网 http://nodejs.cn/download/ 下载node的安装包，目前最新版本为14.15.1
nodejs.cn
下载后双击安装即可，无需手动配置环境变量
安装成功后在终端可以查看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命令创建项目
注意：
由于M1芯片的兼容性问题，cocoapods在这一步安装依赖的时候可能会报错，需要在终端上【右键】-【显示简介】-【勾选使用Rosetta打开】
image.png
image.png
npx react-native init Project
初始化项目时间较长，请耐心等待，主要是cocoapods下载依赖的时间较长
如果中途中断了，或者等待时间太长无反应，需要到ios目录中执行
pod install
当依赖安装成功后，会在ios目录下看到一个白色图标的工程文件
ios.png
Xcode模拟器调试
双击上图的白色工程文件，Xcode将会打开工程。然后随便选择一个模拟器把他运行起来
xcode.png
ios.png
用 vscode 打开项目，其中 android 目录放置的是安卓原生的项目文件，ios 目录放置的是IOS的原生项目文件，index.js 为项目的入口文件，他引入了一个用于演示的页面文件 App.js。我们来修改这个 App.js 文件看一下效果
app.png
demo.png
模拟器 command + D 然后选择 Debug 可以打开调试模式，打开后可以在浏览器端查看打印控制台
debug.png
debug.png
Xcode真机调试
将手机通过数据线连接至电脑，首次连接会在手机上弹出一个信任设备的提示，这里一定要选择【信任】
信任后就可以在xcode上看到你的设备了
iphone.png
首次连接可能没有配置证书，需要在你的 Signing 中添加一个证书
image.png
输入你的Apple ID登录
image.png
登录之后就可以看到一个免费的证书
image.png
然后回到 Signing 中选择这个证书
image.png
这个时候下面有可能还会报一个 identifier 的错误，这是因为我们的 Bundle Identifier 已经被别人使用了，我们需要重新起一个没有被用过的名字就可以了
image.png
然后我们就可以将 APP 安装到手机上了，但这里需要注意。
虽然这时 APP 成功安装到了手机上，但却不能正常打开，Xcode 会提示你要在手机中设置对该APP的信任
image.png
点击【设置】【通用】【设备管理】选择开发者APP中对应的你的APP，选择信任
image.png
image.png
之后就可以正常打开APP了。
Android Studio 真机调试
由于我们的开发环境为 Mac OSX ，所以 Xcode 只需要在 App Store 中点击安装就可以了，无需配置任何内容，非常简单。
但是安卓的开发环境配置起来就比较复杂了，但没关系，只要跟着我下面的步骤来，很快就可以配置好你的开发环境。
首先下载 JDK，下载地址：https://www.androiddevtools.cn/#
JDK.png
选择 Mac OSX 1.8 版本的 JDK
image.png
下载完成后双击下一步下一步安装就可以了，会自动将环境变量配好。
在终端中输入 java -version 出现如下字样表示安装成功。
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目录中，这里根据自己的情况自行调整。
image.png
然后在 Android Studio 中打开 Preferences 选择 SDK Tools 并勾选 Show Package Details
image.png
image.png
勾选一些需要的SDK版本并下载
接下来是配置环境变量，cd 到根目录下打开.bash_profile文件，如果没有就创建一个
cd ~
open .bash_profile
将这些统统添加进去，要根据自己的实际路径添加。
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
保存之后执行下面的命令，使环境变量生效
source .bash_profile
确保手机打开了USB调试模式，并用数据线连接到电脑。
image.png
可以看到已经正常识别到了设备
但是这时在 Android Studio 上点击运行后会在手机上报这个错
image.png
这是因为 adb 的端口和手机的端口不一致导致的
我们在终端中输入下面的命令，重新指定一下端口
adb reverse tcp:8081 tcp:8081
然后摇一摇手机，在弹出的窗口中选择 Settings
image.png
然后选择这一项
image.png
然后打开网络偏好设置，查看一下分配到电脑的ip地址
image.png
image.png
将这个ip地址加上8081端口填入
image.png
这次再重新运行，手机端就可以正常调试了。
网友评论