React Native学习之适配Android/IOS总结篇

# 一、环境搭建

# 1.1 React Native环境搭建

# 1.1.1 IOS环境搭建

环境：MacOS

# 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上
brew install node 

# Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能
brew install watchman

@前端进阶之旅: 代码已经复制到剪贴板

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

npm install -g yarn react-native-cli

@前端进阶之旅: 代码已经复制到剪贴板

1. 创建新项目

init 命令默认会创建最新的版本，而目前最新的0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目。可以暂时创建0.44.3的版本

react-native init MyApp --version 0.44.3

@前端进阶之旅: 代码已经复制到剪贴板

2. 编译并运行 React Native 应用

1). 运行方式一 在你的项目目录中运行react-native run-ios

cd MyApp
react-native run-ios

@前端进阶之旅: 代码已经复制到剪贴板

2). 运行方式二 在xCode中运行

打开xcode选择项目中myApp/ios/myApp.xcodeproj，然后点击左上角运行即可

更多详情 https://reactnative.cn/docs/getting-started.html

3. 远程调试

ctrl + R刷新
ctrl + D 选择对应的工具调试

Enable Live Reload

当你的js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上

在浏览器中打开 http://localhost:8081/debugger-ui

巧用Sources面板

指定模拟的设备类型

你可以使用--simulator参数，在其后加上要使用的设备名称来指定要模拟的设备类型（目前默认为"iPhone X"）。如果你要模拟 iPhone 4s，那么这样运行命令即可：react-native run-ios --simulator "iPhone 4s"。
你可以在终端中运行xcrun simctl list devices来查看具体可用的设备名称

# 1.1.2 安卓环境搭建

安装依赖

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio

brew install node
brew install watchman

@前端进阶之旅: 代码已经复制到剪贴板

npm install -g yarn react-native-cli

@前端进阶之旅: 代码已经复制到剪贴板

Java Development Kit

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。你可以在命令行中输入

javac -version来查看你当前安装的 JDK 版本。如果版本不合要求，则可以到官网上下载

1. 安装 Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

然后点击"Next"来安装选中的组件。安装完成后，看到欢迎界面时，就可以进行下面的操作了

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

Android SDK Platform 27
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本

最后点击"Apply"来下载和安装这些组件。

3. 配置 ANDROID_HOME 环境变量

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

具体的做法是把下面的命令加入到~/.bash_profile文件中

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

@前端进阶之旅: 代码已经复制到剪贴板

如果你的命令行不是 bash，而是例如 zsh 等其他，请使用对应的配置文件

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

4. 编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android

Android Studio自带工具运行

使用genymotion模拟器

去官网需要注册并下载https://www.genymotion.com/，需要注册登录再下载的。注意下载`with virtualBox`版本，然后安装完成后需要登录，就是刚才注册的账号。登录后进入这个页面做两个操作

点击settings，选择adb设置sdk就是刚才一直用的sdk安装路径,如下

启动项目，点击genymotion里的start启动我们刚才安装好的的虚拟设备，是这个样子的，此时我们刚才初始化的项目还没连上虚拟设备

然后在我们的工程项目里执行adb devices会列出当前启动的虚拟设备，能检测到说明没问题，如下图里最后一行显示的就是刚才我们开启的genymotion那台虚拟设备

最后项目目录里执行

react-native run-android

@前端进阶之旅: 代码已经复制到剪贴板

打开genymotion，欢迎页面出来了，成功，修改一下文字，重新加载一遍，成功

第一次默认不是热加载形式，就是改变文件内容需要手动刷新的，这里设置一下热加载，以后内容这里就会自动刷新，mac是执行command+r，选择第四个hot reloading

运行react-native run-andriod 会下载很多东西，然后出现这个标志说明编译没有问题，还缺少一个模拟设备

如果是安卓5.0以下需要配置一下IP

# 1.2 安卓设备真机调试

1. 开启 USB 调试

在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP

2. 通过 USB 数据线连接设备

下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用adb devices命令：

3. 运行应用

现在你可以运行react-native run-android来在设备上安装并启动应用了

从设备上访问开发服务器

运行adb reverse tcp:8081 tcp:8081
在命令行执行 adb shell input keyevent 82弹出开发者工具。打开热更新和远程调试

# 1.3 移除vscode装饰器报错

点击Visual Studio Code左下角的配置按钮。在搜索框内输入“experimentalDecorators”，发现竟然能够找到选项，如下

"javascript.implicitProjectConfig.experimentalDecorators": false

@前端进阶之旅: 代码已经复制到剪贴板

试着将false改为true，重启Visual Studio Code

https://blog.csdn.net/yiifaa/article/details/78862507

# 二、矢量图标的运用

https://github.com/oblador/react-native-vector-icons

react-native-vector-icons 是可以直接使用图片名就能加载图片的第三方,类似于web的 iconfont矢量图，使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧

npm install react-native-vector-icons --save
npm install rnpm -g

@前端进阶之旅: 代码已经复制到剪贴板

# 2.1 android平台

1. 自动配置

react-native link react-native-vector-icons
# 或者
npm install -g rnpm
rnpm link react-native-vector-icons

@前端进阶之旅: 代码已经复制到剪贴板

会为你配置好所有，但是这是成功的情况下，你不需要操心任何事，但是往往不能如愿。如果你这步成功了，而且能够正常运行，下面这些你就可以跳过

2. 手动配置

第一步：复制字体文件（这一步千万不能忘记，不然就算运行成功你也看不到图标）

找到项目node_modules/react-native-vector-icons/Fonts，里面有很多已经内置的图标库字体文件，依照自己的需求，复制你需要的字体文件到 android/app/src/main/assets/fonts，（如果没有这个目录就自行创建）

第二步：配置 android/settings.gradle

在现有的代码基础上添加如下代码

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

@前端进阶之旅: 代码已经复制到剪贴板

第三步：配置android/app/build.gradle

特性

启动页

# 一、环境搭建

# 1.1 React Native环境搭建

# 1.1.1 IOS环境搭建

环境：MacOS

# 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上
brew install node 

# Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能
brew install watchman

@前端进阶之旅: 代码已经复制到剪贴板

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

npm install -g yarn react-native-cli

@前端进阶之旅: 代码已经复制到剪贴板

1. 创建新项目

init 命令默认会创建最新的版本，而目前最新的0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目。可以暂时创建0.44.3的版本

react-native init MyApp --version 0.44.3

@前端进阶之旅: 代码已经复制到剪贴板

2. 编译并运行 React Native 应用

1). 运行方式一 在你的项目目录中运行react-native run-ios

cd MyApp
react-native run-ios

@前端进阶之旅: 代码已经复制到剪贴板

2). 运行方式二 在xCode中运行

打开xcode选择项目中myApp/ios/myApp.xcodeproj，然后点击左上角运行即可

更多详情 https://reactnative.cn/docs/getting-started.html

3. 远程调试

ctrl + R刷新
ctrl + D 选择对应的工具调试

Enable Live Reload

当你的js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上

在浏览器中打开 http://localhost:8081/debugger-ui

巧用Sources面板

指定模拟的设备类型

你可以使用--simulator参数，在其后加上要使用的设备名称来指定要模拟的设备类型（目前默认为"iPhone X"）。如果你要模拟 iPhone 4s，那么这样运行命令即可：react-native run-ios --simulator "iPhone 4s"。
你可以在终端中运行xcrun simctl list devices来查看具体可用的设备名称

# 1.1.2 安卓环境搭建

安装依赖

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio

brew install node
brew install watchman

@前端进阶之旅: 代码已经复制到剪贴板

npm install -g yarn react-native-cli

@前端进阶之旅: 代码已经复制到剪贴板

Java Development Kit

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。你可以在命令行中输入

javac -version来查看你当前安装的 JDK 版本。如果版本不合要求，则可以到官网上下载

1. 安装 Android Studio

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

然后点击"Next"来安装选中的组件。安装完成后，看到欢迎界面时，就可以进行下面的操作了

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

Android SDK Platform 27
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本

最后点击"Apply"来下载和安装这些组件。

3. 配置 ANDROID_HOME 环境变量

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

具体的做法是把下面的命令加入到~/.bash_profile文件中

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

@前端进阶之旅: 代码已经复制到剪贴板

如果你的命令行不是 bash，而是例如 zsh 等其他，请使用对应的配置文件

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

4. 编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android

Android Studio自带工具运行

使用genymotion模拟器

去官网需要注册并下载https://www.genymotion.com/，需要注册登录再下载的。注意下载`with virtualBox`版本，然后安装完成后需要登录，就是刚才注册的账号。登录后进入这个页面做两个操作

点击settings，选择adb设置sdk就是刚才一直用的sdk安装路径,如下

启动项目，点击genymotion里的start启动我们刚才安装好的的虚拟设备，是这个样子的，此时我们刚才初始化的项目还没连上虚拟设备

然后在我们的工程项目里执行adb devices会列出当前启动的虚拟设备，能检测到说明没问题，如下图里最后一行显示的就是刚才我们开启的genymotion那台虚拟设备

最后项目目录里执行

react-native run-android

@前端进阶之旅: 代码已经复制到剪贴板

打开genymotion，欢迎页面出来了，成功，修改一下文字，重新加载一遍，成功

第一次默认不是热加载形式，就是改变文件内容需要手动刷新的，这里设置一下热加载，以后内容这里就会自动刷新，mac是执行command+r，选择第四个hot reloading

运行react-native run-andriod 会下载很多东西，然后出现这个标志说明编译没有问题，还缺少一个模拟设备

如果是安卓5.0以下需要配置一下IP

# 1.2 安卓设备真机调试

1. 开启 USB 调试

在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP

2. 通过 USB 数据线连接设备

下面检查你的设备是否能正确连接到 ADB（Android Debug Bridge），使用adb devices命令：

3. 运行应用

现在你可以运行react-native run-android来在设备上安装并启动应用了

从设备上访问开发服务器

运行adb reverse tcp:8081 tcp:8081
在命令行执行 adb shell input keyevent 82弹出开发者工具。打开热更新和远程调试

# 1.3 移除vscode装饰器报错

点击Visual Studio Code左下角的配置按钮。在搜索框内输入“experimentalDecorators”，发现竟然能够找到选项，如下

"javascript.implicitProjectConfig.experimentalDecorators": false

@前端进阶之旅: 代码已经复制到剪贴板

试着将false改为true，重启Visual Studio Code

https://blog.csdn.net/yiifaa/article/details/78862507

# 二、矢量图标的运用

https://github.com/oblador/react-native-vector-icons

react-native-vector-icons 是可以直接使用图片名就能加载图片的第三方,类似于web的 iconfont矢量图，使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧

npm install react-native-vector-icons --save
npm install rnpm -g

@前端进阶之旅: 代码已经复制到剪贴板

# 2.1 android平台

1. 自动配置

react-native link react-native-vector-icons
# 或者
npm install -g rnpm
rnpm link react-native-vector-icons

@前端进阶之旅: 代码已经复制到剪贴板

会为你配置好所有，但是这是成功的情况下，你不需要操心任何事，但是往往不能如愿。如果你这步成功了，而且能够正常运行，下面这些你就可以跳过

2. 手动配置

第一步：复制字体文件（这一步千万不能忘记，不然就算运行成功你也看不到图标）

找到项目node_modules/react-native-vector-icons/Fonts，里面有很多已经内置的图标库字体文件，依照自己的需求，复制你需要的字体文件到 android/app/src/main/assets/fonts，（如果没有这个目录就自行创建）

第二步：配置 android/settings.gradle

在现有的代码基础上添加如下代码

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

@前端进阶之旅: 代码已经复制到剪贴板

第三步：配置android/app/build.gradle

特性

启动页