一、开发环境依赖安装 

必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。

brew安装及问题：

苹果电脑标准安装脚本：

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

1、系统权限需要管理员

2、有权限后公司内网可能无法访问raw.githubusercontent.com、gitee.com导致安装失败

解决方法：

使用其它镜像安装

参考：

https://mirror.tuna.tsinghua.edu.cn/help/homebrew/

https://gitee.com/cunkai/HomebrewCN/

如果上面的脚本无法安装可以尝试把 https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh 下载到本地执行

brew install node

npm install -g yarn

brew install watchman

watchman本地安装

https://facebook.github.io/watchman/docs/install.html

$ unzip watchman-*-macos.zip
$ cd watchman-vYYYY.MM.DD.00-macos
$ sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
$ sudo cp bin/* /usr/local/bin
$ sudo cp lib/* /usr/local/lib
$ sudo chmod 755 /usr/local/bin/watchman
$ sudo chmod 2777 /usr/local/var/run/watchman

Android Studio 安装

JAVA环境

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）可以使用homebrew安装：

brew install adoptopenjdk/openjdk/adoptopenjdk8

javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。

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"

安装 Android Studio 参考：https://reactnative.cn/docs/0.64/environment-setup，建议选择自定义安装

配置 ANDROID_HOME 环境变量

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

CocoaPod安装

参考清华镜像源：https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/

pod install 报无法访问github.com解决方法，可以将这个依赖包的下载地址修改成镜像域名，

例如将~/.cocoapods/repos/master/Specs/0/0/0/LiucyNet/0.1.0/LiucyNet.podspec.json中source 对应的 github.com更新镜像域名。

找到报错的包：cd ~/.cocoapods/repos/master/Specs &&  find  ./ -name LiucyNet

其它国内镜像

https://doc.fastgit.org/CocoaPods/Specs.git

https://gitclone.com/CocoaPods/Specs.git

https://gitee.com/mirrors/CocoaPods/Specs.git

https://github.com.cnpmjs.org/CocoaPods/Specs.git

https://gitcafe.com/akuandev/Specs.git

cd  ~/.cocoapods/repos/master/ 

git clone https://github.com/CocoaPods/Specs.git

pod相关命令：

# 第一次使用安装框架    

# 只用安装一次，之后使用添加删除都用 pod update --no-repo-update

pod install

pod search AFNetworking

pod install --no-repo-update

pod install --verbose --no-repo-update  安装框架，不更新本地索引，速度快

pod repo remove master 

pod repo list 

pod repo update

pod repo

Ruby安装及问题

https://ruby-china.org/wiki/rbenv-guide

ruby 源检查：gem sources -l

移除：gem sources --remove https://rubygems.org/

替换添加国内的镜像源：gem sources --add https://gems.ruby-china.com

https://ruby-china.org/wiki/rbenv-guide

https://www.jianshu.com/p/d1d2e68984ef

git clone https://hub.nuaa.cf/libevent/libevent.git

环境变量不生效问题 

切换终端到bash

chsh -s /bin/bash

切换终端到zsh

chsh -s /bin/zsh

二、React Native Web开发

Expo Web 开发文档

https://docs.expo.dev/guides/progressive-web-apps/

https://docs.expo.dev/workflow/web/

工具安装

npm install --global expo-cli

npm install -g react-native-cli

脚手架使用

指定版本：npx react-native init AwesomeProject --version 0.66.0 

指定模版：npx react-native init AwesomeTSProject --template react-native-template-typescript

Expo指定版本：expo init --template expo-template-blank@sdk-43 

备注：RN0.64.4 需要使用 exp sdk v43这个版本，否则可能会出版本兼容问题

EXPO SDK及模板的版本情况可以查询：https://github.com/expo/expo/blob/sdk-43/templates/expo-template-blank/package.json

如果之前在模拟器中安装过高版本，可以先删除模拟器中的expo go 重新使用 yarn android 时会根据当时版本重新下载安排对应的app

三、调试相关工具

查看可用的iOS设备：xcrun simctl list devices   

查看可用的Android设备：adb devices   

查询模拟器：emulator -list-avds

打开模拟器：emulator -avd Pixel_3a_API_33_x86_64

vscode插件： 

真机开发时，调试应用只需要晃动下设备即可打开调试选项

Android模拟器调试的快捷键是【Command +M】

iOS模拟器的快捷键是【Command +D】

chrome 开发者工具

快捷键【Command +Option +I】即可打开调试窗口   

四、其它开发资源

React Native 端开发前注意：

https://taro-docs.jd.com/docs/react-native-remind

React Navigation中文文档

https://www.reactnavigation.org.cn/docs/guide-quick-start

React Native中文文档

https://reactnative.cn/docs/0.64/environment-setup

Expo SDK 升级信息，查看版本升级情况

https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/

Expo沙盒工具简介

https://www.cnblogs.com/marsk6/p/15221411.html

开发环境搭建

https://juejin.cn/post/7135641433834258445

android-studio-emulator模拟器安装

https://docs.expo.dev/workflow/android-studio-emulator/?redirected

Flex 布局教程：语法篇

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

轻松学会 React 钩子

https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html

React 入门实例教程

https://www.ruanyifeng.com/blog/2015/03/react.html

组件库

https://mobile.ant.design/zh

 https://nativebase.io/

https://reactnativepaper.com/

https://callstack.github.io/react-native-paper/icons.html

https://www.awesome-react-native.com/