ReactNative 开发环境搭建，安卓、IOS 打包、模拟器、真机调试

React Native 开发 APP前端开发环境搭建

开发工具

IDEA 2020.1 、 SVN 1.8 、Xcode 12.5

操作系统

Mac OS Big Sur 11.3.1，android 9，IOS 14.5

1.从版本库下载项目源码

SVN 地址：略

2.安装Node JS版本管理工具NVM

（目的是支持在一台机器中同时存在多个版本的Node 根据需要灵活切换）

2.1.安装nvm

打开终端：
1. brew install nvm
2. make dir ~/.vnm
3. 配置环境变量，根据系统选择在(～/.zhsrc 或 ～/.bash_profile) 添加环境变量配置
	# Node JS 版本管理工具 nvm 环境变量
	export NVM_DIR="$HOME/.nvm"
	[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  
	[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm" 

4. source ～/.zhsrc 或 source ～/.bash_profile

2.2.重开终端，输入y

2.3.验证是否安装成功

2.4.查看本机一被管理的node

2.5.安装新的node JS

根据项目需要 安装 node JS 8.16.1

nvm install 8.16.1 

3.安装yarn

npm install -g yarn

4.进入项目安装依赖

>cd /项目目录
>yarn install

其他命令参考：https://yarn.bootcss.com/docs/usage/

成功后项目下会出现node_modules目录，Mac系统下会有文件权限问题，最好将该目录下搜有文件权限修改为

chmod -R 777 node_modules

yarn 命令参考：

初始化一个新项目

yarn init

添加依赖包

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

将依赖项添加到不同依赖项类别中

分别添加到 devDependencies、peerDependencies 和 optionalDependencies 类别中：

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

升级依赖包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

移除依赖包

yarn remove [package]

安装项目的全部依赖

yarn

或者

yarn install

5.运行项目

5.1 安卓插件、SDK

5.2 安装Android SDK

5.3设置环境变量

在～/.zshrc 或～/.bash_profile添加 :ANDROID_HOME=/Users/xx/Library/Android/sdk

5.4配置模拟器

5.5运行代码

1. cd 项目根目录
2. npm start

如果出现错误：

npm install -g fsevents
npm remove -g watchman 

# 这个过程视网络情况可能会非常漫长
brew install watchman
#brew upgrade watchman

再次执行命令： npm start

5.6 运行dev出错

出错

解决：

1. 清除缓存重新打开工具

2. 注意修改项目下安卓版本

   /android/build.gradle

3. 先启动模拟器，再运行dev

6.启动 Xcode添加IOS 工程

6.1选择打开本地文件

6.2 找到app.xcodeproj文件

6.3 添加appleID

注意一定是邮箱注册的Apple ID ，不能是手机号注册的，因为手机号注册的Apple ID无法被加入开发者Team

6.4 加入Team

​ 1. Team管理员登录苹果网站管理Team，邀请开发者填写开发者apple ID等信息。

​ 2. 开发者登录接受邀请加入Team

6.5 IOS模拟器调试

修改：App/node_modules/react-native/React/Base/RCTModuleMethod.mm

1.在IDEA中修改App/node_modules/react-native/React/Base/RCTModuleMethod.mm
    static BOOL RCTParseUnused(const char **input)
    {
      return RCTReadString(input, "__unused") ||
             RCTReadString(input, "__attribute__((unused))");
    }
    替换为：
    static BOOL RCTParseUnused(const char **input)
    {
      return RCTReadString(input, "__attribute__((unused))") ||
               RCTReadString(input, "__attribute__((__unused__))") ||
               RCTReadString(input, "__unused");
    }

2.Xcode12.5 模拟IOS 14.5修改文件
  定位到文件/Libraries/React.xcodeproj/React/CxxBridge/RCTCxxBridge.mm
将代码：
_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules
替换为:
_initializeModules:(NSArray<Class> *)modules

点击构建按钮等待编译完成：

6.6 IOS真机调试

修改：App/ios/yyy/AppDelegate.m

  //isDev=NO;

    //修改为本机IP，注意不要写127.0.0.1
    jsCodeLocation = [RCTBundleURLProvider jsBundleURLForBundleRoot:@"index" packagerHost:@"10.1.3.252" enableDev:YES enableMinification:NO];

使用USB连接手机到苹果电脑后，选择IOS Device，手机上选择信任。

编译成功后会弹出，此时需要先登录开发者网站下载证书并完成导入。

登录苹果开发者账号https://developer.apple.com进入账户中心

找到自己的账户信息，点击进入后下载证书。

双击打开证书文件，

输入密码，始终允许后，即可开始真机调试。

6.7 构建错误问题处理

1. 出现“Command PhaseScriptExecution failed with a nonzero exit code”，点击 File -> Project Settings

2. 出现～/.rncache目录下文件解压缩失败。

   解决办法：删除目录下所有文件后重新构建

   

3. 错误：“Cannot initalize a parameter of type 'NSArray<id>*'with an rvalue type ‘NSArray *’”

   错误原因：

   使用Xcode12.5 打包React Native / iOS SDK. No matching function for call to ‘RCTBridgeModuleNameForClass’ after update iOS SDK to 14.5
   
   0.61.5 → 0.62.0 RCTBridgeModule Error #28405
   

   错误截图：

   

   解决办法：

   定位到文件/app/Libraries/React.xcodeproj/React/CxxBridge/RCTCxxBridge.mm
   将代码：
   _initializeModules:(NSArray<id<RCTBridgeModule>> *)modules
   替换为:
   _initializeModules:(NSArray<Class> *)modules