文章目录

  • IOS环境
  • 1、安装依赖
  • Node
  • Watchman
  • Xcode
  • CocoaPods
  • 2、创建项目
  • 3、调试项目
  • Android环境
  • 1、下载 java8
  • 2、下载Android Studio
  • 3、进入后开始下载Android SDK、工具、模拟器
  • 4、配置 ANDROID_HOME 环境变量
  • 5、安装模拟器
  • 6、运行项目
  • 7、创建项目
  • 8、调试项目
  • 问题记录


IOS环境

1、安装依赖

Node、Watchman、Xcode 和 CocoaPods。

Node

12 以上的版本。建议使用 nvm 来安装。

Watchman

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

brew install watchman

这里我下载时本来开的命令行代理，下载到某一个文件后就连不上了，我关了命令行代理重新下载就可以了。
总之下载遇到网络问题就切换代理。
因为有些资源需要代理有些不需要，可以先用代理，下载一部分，然后重新下载的时候在关掉代理。反复下载

Xcode

去 App Store 下载
安装的时候会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

命令行工具：

rn使用axios rn开发教程_创建项目

iOS 模拟器下载：

rn使用axios rn开发教程_Android_02

CocoaPods

CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）

brew install cocoapods

以上我们的环境就安装完成了，接下来我们创建项目

2、创建项目

创建项目

npx react-native init AwesomeProject
# 指定模板
npx react-native init AwesomeTSProject --template react-native-template-typescript

运行

cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

3、调试项目

  • yarn start 修改代码保存后，模拟器会自动刷新
  • CMD + D or 顶部 Device > Shake：可以调出
  • CMD + R：刷新页面
  • 有些时候你必须要重新编译应用（run-ios 或是 run-android）才能使修改生效。比如：增加了新的资源 or 改了原生代码
  • Chrome 开发者工具 f12， CMD + D 打开 Debug width Chrome
  • npm install -g react-devtools 安装完执行：react-devtools可启动此工具
  • 点击元素查看 dom，可以 CMD + D 打开 Show Inspector，同时打开 react-devtools，

Android环境

1、下载 java8

brew install adoptopenjdk/openjdk/adoptopenjdk8

java -version 或 javac -version 测试

如果你本地存在多个java版本，可以看这篇文章，java：切换jdk版本

2、下载Android Studio

官网下载 下载完成后打开Android Studio

1、需要设置DL，支持HTTP和SOCKS5

打开你的 SS，将地址和端口写到Android Studio的提示框就行

rn使用axios rn开发教程_java_03


2、然后继续下一步，选择 Custom

3、继续下一步，这里打钩钩不上，先不管，进去再下载

rn使用axios rn开发教程_java_04

3、进入后开始下载Android SDK、工具、模拟器

rn使用axios rn开发教程_java_05

打开SDK Manager，打开方式有几种，如下图

Preferences → Appearance & Behavior → System Settings → Android SDK。

rn使用axios rn开发教程_rn使用axios_06


目前默认下载的最新版本，我们需要的是 Android 10 (Q)，选择后就可以下载了

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
  • SDK Tools：Android SDK Build-Tools 29.0.2
  • SDK Tools：NDK 20.1.5948944

4、配置 ANDROID_HOME 环境变量

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

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

source ~/.bash_profile

5、安装模拟器

rn使用axios rn开发教程_java_07


rn使用axios rn开发教程_创建项目_08

6、运行项目

yarn android 然后把 Android 目录放在 Android studio 里，点击运行

rn使用axios rn开发教程_java_09


rn使用axios rn开发教程_ios_10

7、创建项目

创建项目

npx react-native init AwesomeProject
# 指定模板
npx react-native init AwesomeTSProject --template react-native-template-typescript

运行

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

8、调试项目

  • yarn start 修改代码保存后，模拟器会自动刷新

问题记录

若下载中途失败，请反复下载