React Native 从环境搭建到打包上线全网最全之Mac环境篇

会联营的陆逊
1,546 阅读9分钟

Mac 电脑可以用来开发安卓和IOS平台，

  • 必须安装的依赖有：Node、JDK
  • 安卓平台需要 Android Studio
  • IOS平台需要 Xcode

1. Homebrew

引用官方的一句话：Homebrew是Mac OS 不可或缺的套件管理器。

Homebrew是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。

安装

官方给出的安装方案，这个需要科学上网才能正常安装使用

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

推荐使用国内镜像安装

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

image.png

image.png

image.png

2. Node & Watchman

使用 Homebrew 来安装 Node 和 Watchman。在命令行中执行下列命令安装:

brew install node  
brew install watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

如果你已经安装了 Node，请检查其版本是否在 v14 以上。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。

nrm

nrm是一个npm源管理工具，使用它可以快速切换npm源。

npm install -g nrm

查看源列表

nrm ls

切换 npm 源

# 使用nrm工具切换淘宝源  
npx nrm use taobao  
  
# 如果之后需要切换回官方源可使用  
npx nrm use npm

Yarn​

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

3. 安卓平台

Java Development Kit​

我们推荐使用Homebrew来安装由 Azul 提供的 名为 Zulu 的 OpenJDK 发行版。此发行版同时为 Intel 和 M1 芯片提供支持。在 M1 芯片架构的 Mac 上相比其他 JDK 在编译时有明显的性能优势。

brew tap homebrew/cask-versions
brew install --cask zulu11

React Native 需要 Java Development Kit [JDK] 11。你可以在命令行中输入 javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。

低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 8 版本）。

Android 开发环境

这里安装使用和window 环境大致相同， 可以查看 React Native 从环境搭建到打包上线全网最全之window环境篇

有区别的是模拟器的连接和Android SDK环境变量配置

配置 ANDROID_SDK_ROOT 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

具体的做法是把下面的命令加入到 shell 的配置文件中。如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为~/.bash_profile（可以使用echo $0命令查看你所使用的 shell。）：

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用vi ~/.zshrc命令创建或编辑。如不熟悉 vi 操作，请点击这里学习。

使用source $HOME/.zshrc命令来使环境变量设置立即生效（否则重启后才生效）。可以使用echo $ANDROID_SDK_ROOT检查此变量是否已正确设置。

请确保你正确指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

模拟器连接

具体安装使用是看查看我的前一篇文章， window 环境搭建

使用网易MUMU模拟器连接设备

adb devices #查看连接设备
adb kill-server && adb server

其他步骤与 window 环境无异， 这里就不重复介绍了

4. IOS 平台

Xcode

React Native 目前需要Xcode 12 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

其他的可以参考ReactNative环境搭建的介绍

5. 上架 App Store

配置 release scheme

需要在 Xcode 使用Release scheme 编译在 App Store 发布的 app。Release版本的应用会自动禁用开发者菜单，同时也会将 js 文件和静态图片打包压缩后内置到包中，这样应用可以在本地读取而无需访问开发服务器（同时这样一来你也无法再调试，需要调试请将 Buiid Configuration 再改为 debug）。
由于发布版本已经内置了 js 文件，因而也无法再通过开发服务器来实时更新。面向用户的热更新，请使用专门的热更新服务。

要配置 app 为使用Release scheme 编译，请前往Product → Scheme → Edit Scheme。选择侧边栏的Run标签，然后设置下拉的 Build Configuration 为Release。

image.png

编译发布 app​

现在可以通过点击⌘B或从菜单栏选择 Product → Build 编译发布 app。一旦编译发布，就能够向 beta 测试者发布 app，提交 app 到 App Store。

苹果开发者

在上架App Store 之前需要先准备一个苹果开发者账号， 然后登录 Apple 开发者

苹果开发者账号主要分三种：

  • 个人开发者账号（$99/年)
  • 公司开发者账号（$99/年)
  • 企业级开发者账号（$299/年)

这三种账号的相同点是都可以用来开发App，不同点在于对外发布App的方式不同。个人开发者账号和公司开发者账号只能发布App到苹果商店，经过苹果审核人员漫长而苛刻的审核通过后才能出现在App Store被用户搜索下载。而企业开发者账号是不能发布App到App Store的，但苹果允许企业账号签名的App可以直接发布App，无需经过苹果审核，签名后生成一个新的安装包，然后传到分发平台供所有iPhone用户下载安装。

image.png

点击右上角 Account 账户， 输入账号密码进行登录

image.png

在苹果应用上架之前需要准备东西如下：

  • Certificates 证书
  • Identifiers 应用标识
  • Profiles 描述文件
  • App Store 应用

1. Certificate （证书）

iOS证书是用来证明iOS App内容（executable code）的合法性和完整性的数字证书。对于想安装到真机或发布到AppStore的应用程序（App），只有经过签名验证（Signature Validated）才能确保来源可信，并且保证App内容是完整、未经篡改的。

数字证书是一个经证书授权中心数字签名的包含公开密钥拥有者信息以及公开密钥的文件。具有时效性，只在特定的时间段内有效。

开发证书类型分为两种，一种开发证书（iOS Development）一种发布证书(iOS Distribution)。开发证书（iOS Development）用于开发和调试应用程序，可用于真机调试；生产证书用于打包上传App Store，用于验证开发者身份。

创建CSR文件（证书请求文件）

CSR（Certificate signing request）即证书请求文件。证书申请者在申请数字证书时由CSP(加密服务提供者)在生成私钥的同时也生成证书请求文件（CSR文件），证书申请者只要把CSR文件提交给证书颁发机构后（创建App ID时上传到苹果后台），证书颁发机构使用其根证书私钥签名生成证书公钥文件（开发者证书）。

关于CSR文件的创建，我们可以直接使用Mac上的钥匙串访问直接请求。

具体步骤为： 钥匙串访问 -> 钥匙串访问 -> 证书助理 -> 从证书颁发机构请求证书……

1、打开电脑上的钥匙串访问，选中证书助理；

截屏2022-10-21 下午3.05.38.png

2、用户电子邮件地址填开发者账号的邮箱，名称可以随意填，然后保存到磁盘上。

截屏2022-10-21 下午3.09.43.png

3、Keychain将生成一个包含开发者身份信息的CSR（Certificate Signing Request）文件。

生成证书文件

在账户中心页面点击证书进入证书生成页面

image.png

image.png

image.png

image.png

点击下载就可以生成对应的证书文件了，下载后是 cer 文件

生成 P12 文件

如果不需要给别的电脑使用，则直接跳过该步骤

双击上一步生成的 cer 文件进行证书安装，然后在钥匙串访问中进行导出

image.png

如果没有导出，可以把这个证书删除，然后重新双击下载的证书文件安装

导出证书

image.png

存储证书

image.png

存储的文件格式一定要是.p12

保存密码

可以为证书设定密码， 也可以不设定密码，如果设定了密码， 那么别人安装这个证书的时候就需要输入密码， 否则无法安装

image.png

2. Identifier （应用标识）

image.png

image.png

  • Description: 这个是便于分辨和记忆， 一般是工程名，但是不能输入中文
  • Bundle ID: 一般格式是这样： com.codery.YourProjectName

Xcode 修改 Bundle ID

image.png

Profile （配置文件）

配置文件同样也分两种，分为开发（Development）和发布（Distribution），配置文件（Provisioning Profiles）中包含了证书、App ID、设备（Devices），后缀名为.mobileprovision。它在开发者账号体系中扮演着配置和验证的角色，是真机调试和打包上架必须的文件。

  • 一个Provisioning Profile对应一个Explicit App ID或Wildcard App ID。
  • Provisioning Profile决定Xcode用哪个证书（公钥）/私钥组合（Key Pair/Signing Identity）来签名应用程序（Signing Product）,将在应用程序打包时嵌入到.ipa包里。
  • Provisioning Profile把这些信息全部打包在一起，方便我们在调试和发布程序打包时使用。这样，只要在不同的情况下选择不同的Provisioning Profile文件就可以了。
  • Provisioning Profile也分为Development和Distribution两类，有效期同Certificate一样。Development版本的ProvisioningProfile用于开发调试，Distribution版本的ProvisioningProfile主要用于提交App Store审核，其不指定开发测试的Devices。

image.png

选择刚刚创建的 Identifier

image.png

选择第一步创建的 Certificate

image.png

输入工程名称就是

image.png

App Store 应用

avatar
文章
阅读
粉丝