如何搭建一套RN环境，并且进行调试

本人电脑mac安装

app开发环境搭建也可借鉴官网：
https://taro-docs.jd.com/taro/docs/react-native

1.安装jdk
借鉴链接：https://my.oschina.net/u/4354518/blog/3366189
命令：（获取安装的路径，并打开环境配置文件）

/usr/libexec/java_home -V
touch .bash_profile

复制：

export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"
export CLASSPATH="$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar"

保存

source .bash_profile
echo $JAVA_HOME

2 安装brew
【我之前用过nvm管理node，接下来会一直使用brew，避免混乱，卸载执行命令以下两条命令 1. cd ~ 2. rm -rf .nvm 3.nvm -v】
全程需操作
终端执行命令：【选择1中科大】

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 
brew install node
brew install watchman
【默认下来的是17版本，项目测试只有node10，后续才能yarn install成功】
brew install node@10
brew link --overwrite --force node@10 
node -v【查看是否node切换成功】
npm install -g yarn
yarn global add [email protected]

以下为借鉴命令，不用执行：

brew list【查看目前安装内容】
brew search node【查看可使用的node版本】
brew unlink node@10 【切换node版本 第一步】
brew link --overwrite --force node@12 【切换node版本 第二步】
npm config get registry【查看npm目前镜像】
yarn config get registry【查看yarn目前镜像】
npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmjs.org/【可不执行，回退到官方镜像】
yarn config set registry https://registry.yarnpkg.com【可不执行，回退到官方镜像】
npm cache clean --force【可不执行，清除缓存】
yarn add node-sass 【7.0.1版本】	 

安装成功之后到项目代码根目录下执行
如果项目yarn install失败，先查看 yarn config get sass_binary_sit

yarn install
yarn config set sass_binary_site https://npm.taobao.org/dist/node-sass -g 【如果项目yarn install失败，先查看 yarn config get sass_binary_site】

3.安装安卓环境
过程借鉴链接：https://blog.csdn.net/u012439446/article/details/106887754
https://www.react-native.cn/docs/0.63/environment-setup
https://taro-docs.jd.com/taro/docs/2.x/react-native

3.1安装Android Studio 4.2.2
下载链接：https://developer.android.google.cn/studio/archive
自动默认一直点击下一步
SDK Manager 选择Android API 32；Android11.0（R）；Android10.0（Q）；Android9.0（Pie）；Android8.1（Oreo）；Android6.0（Marshmallow）；
Apply 下载 点击完成
ADV Manager 选择pixel_3a_api31_x86 下载点击完成【安装一个模拟器材，方便调试使用】
终端配置环境【操作类似jdk配置】
执行命令

open -e .bash_profile

复制到环境配置文件里

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools 

执行命令

source .bash_profile

3.2以上安装完成之后 项目根目录下

yarn install【本人在该项 停留许久，解决方案已在上面修复过程】
yarn dev:rn 【成功之后会自动弹一个窗口】

3.3接下来开始调试，有两种方式

3.3.1.模拟机调试
  1.打开Android Studio  在栏目下 app后面选择自己下载的模拟器
  2.File-sync 等待执行成功后
  3.app前面有个锤子 点击执行
  4.点击手机型号后的图标 run

3.3.2.真机调试：
   1.首先手机设置为usb开发调试
	【我采用的是安卓手机真机调试-小米打开usb调试模式，路径 我的设备-全部参数-连续点击“MIUI版本号”，直到手机屏幕提示手机已经进入了开发者模式，进入手机开		发者模式后，点击进入“设置”主页的“更多设置”选项。接着点击进入“开发者选项”。最后打开“USB调试”选项后，手机就打开了USB调试模式。】
   2.插上手机
   3.File-sync 等待执行成功后
   4.app前面有个锤子 点击执行
   5.点击手机型号后的图标 run	，然后手机上自动添加了开发版程序
   6.命令执行
	adb devices 
	adb reverse tcp:8081 tcp:8081
   7.开始调试
3.3.3命令真机调试（命令）
   1.首先手机设置为usb开发调试
	【我采用的是安卓手机真机调试-小米打开usb调试模式，路径 我的设备-全部参数-连续点击“MIUI版本号”，直到手机屏幕提示手机已经进入了开发者模式，进入手机开		发者模式后，点击进入“设置”主页的“更多设置”选项。接着点击进入“开发者选项”。最后打开“USB调试”选项后，手机就打开了USB调试模式。】
   2.插上手机
   3.yarn dev:rn 成功后会弹出一个层  http://localhost:8081/rn_temp/index.bundle?platform=android&dev=true
   5.adb devices 
      adb reverse tcp:8081 tcp:8081
   4.yarn run:android
   5.手机自动安装

可访问链接：https://localhost:8081/rn_temp/index.bundle?platform=android&dev=true

【执行过程中如果出现Welcome to Gradle 5.6.4!，那么代表成功了】
【执行命令报错[出现灰色的Run cli with] ：就执行 chmod 755 android/gradlew】
【如果出现jdk位置提示错误，仔细查看是否是你环境配置的版本号写错了】

4.安装ios环境
4.1获取Xcode证书 密码1 （点击，始终信任）【证书文件在桌面】
4.2 安装Xcode 下载链接： https://developer.apple.com/download/more/
海信 IOS xcode 登录账户
邮箱：[email protected] 邮箱密码：IOSios12
登录密码：IOSios12 手机双重认证：13810069162 找陈振杰要验证码
下载对应的xcode（我的电脑版本10.15，所以选择的是xcode 12.4），【下载解压安装长达两小时，请耐心】
4.3.安装必备ruby 2.7.0
4.4终端命令：ruby-v 如果有版本，但是低于2.7.0 那么就进行升级【我的电脑是】
低于则执行命令：

brew install ruby
open -e .bash_profile

复制

export PATH="/usr/local/opt/ruby/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"

执行命令

source .bash_profile

4.5 终端执行命令：

brew install cocoapods@1  【pod --version 查看是否安装完成】

4.6安装React Native Debugger 【用于调试】
https://github.com/jhen0409/react-native-debugger/releases 【我下载的是rn-debugger-macos-x64.zip】
安装完成打开软件
Debugger-Open Config File 打开 查找defaultNetworkInspect设置为true，保存
调试时，在真机或者模拟器里调出开发者工具，选择 Debug，即可看到执行的各个事件
4.7开始准备调试，进入项目根目录

yarn clean:ios【第一次一定要执行一下这条命令，它会生成两个必须文件，iOS文件夹下bundle里的main.jsbundle和asset文件夹】
cd ios/ && pod install && cd .. 【注意：每次打包前需执行 ./make-ios-bundle.sh】【每次package.json有改动 也要install】
yarn dev:rn 
yarn run:ios

成功后浏览器打开链接，打开即可调试
http://localhost:8081/rn_temp/index.bundle?platform=ios&dev=true

苹果模拟器快捷键：Command+D
模拟器能调出开发者工具 可点击debug 就可以检测接口等信息了