React-Native开发环境搭建与调试

2020-12-23 本文已影响0人无穷369

本次用于教学的开发设备为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

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

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

之后就可以正常打开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

下载完成后找一个地方解压出来，待会儿会用到。

然后下载 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

勾选一些需要的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

保存之后执行下面的命令，使环境变量生效