跨平台技术篇 - React Native 环境搭建与运行的坑

今天开始来写跨平台技术，比较有名的就是 Facebook 的 React Native 和 Google 的 Flutter，目前 Flutter 正如日中天，因为体验更接近原生。先来几篇文章看看 React Native。

 

目录：

1. 环境搭建
2. 创建新应用
3. 运行出现的问题

 

 

1. 环境搭建

我的环境是 Mac os & Android，因为我电脑上已经安装了 JDK 和 Android Studio，所以整个安装过程还是比较轻松的，其他安装教程可以看：https://reactnative.cn/docs/getting-started/，里面能够选择电脑系统和手机系统。

整体步骤就是：

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

# 安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

# Yarn、React Native 的命令行工具（react-native-cli）
# Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于# 执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli

# 安装完 yarn 后同理也要设置镜像源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

 

 

2. 创建新应用

使用 React Native 命令行工具来创建一个名为 "AwesomeProject" 的新项目：

eact-native init AwesomeProject

创建完后目录如下，可以看到包括 js 文件和 Android & ios 目录，Android 目录打开和我们平时的项目差不多：

 

 

3. 运行出现的问题

确保你的手机或者模拟器在线，然后执行命令：

cd AwesomeProject
react-native run-android

第一次比较慢，会下载各种依赖包。但是最终还是安装失败了：

报错：error Command failed: ./gradlew app:installDebug

经过一番 google，答案众说纷纭，我的做法是将 android 目录用 Android Studio 打开，然后发现 gradle 同步失败，此时报的错为：

* What went wrong:
Could not resolve all files for configuration ':app:debugCompileClasspath'.
> Could not resolve com.facebook.infer.annotation:infer-annotation:0.11.2.
  Required by:
      project :app > com.facebook.react:react-native:0.57.0
   > Could not resolve com.facebook.infer.annotation:infer-annotation:0.11.2.
      > Could not get resource 'https://jcenter.bintray.com/com/facebook/infer/annotation/infer-annotation/0.11.2/infer-annotation-0.11.2.pom'.
         > Could not GET 'https://jcenter.bintray.com/com/facebook/infer/annotation/infer-annotation/0.11.2/infer-annotation-0.11.2.pom'.
            > sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
   > Could not resolve com.facebook.infer.annotation:infer-annotation:0.11.2.
      > Could not get resource 'https://dl.google.com/dl/android/maven2/com/facebook/infer/annotation/infer-annotation/0.11.2/infer-annotation-0.11.2.pom'.
         > Could not GET 'https://dl.google.com/dl/android/maven2/com/facebook/infer/annotation/infer-annotation/0.11.2/infer-annotation-0.11.2.pom'.
            > sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
> Could not resolve com.facebook.fresco:fresco:1.10.0.
  Required by:
      project :app > com.facebook.react:react-native:0.57.0
   > Could not resolve com.facebook.fresco:fresco:1.10.0.
      > Could not get resource 'https://jcenter.bintray.com/com/facebook/fresco/fresco/1.10.0/fresco-1.10.0.pom'.
         > Could not GET 'https://jcenter.bintray.com/com/facebook/fresco/fresco/1.10.0/fresco-1.10.0.pom'.
            > sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
   > Could not resolve com.facebook.fresco:fresco:1.10.0.
...

最终根据上面的原因终于找到解决方案：

将 Preferences/Build, Execution, Deployment/Gradle/Android Studio/ 下的 Enable embedded Maven repository 选项选中，再同步 gradle 就成功了。

此时可以直接点击 Android Studio 中的绿色按钮运行：

又出现了一个问题，Unable to load script，没有找到脚本，如果解决呢？

先在 app/src/main/ 目录下新建一个 assets 目录，然后执行如下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

运行完后，assets 目录下就会多出一个文件：index.android.bundle

可以看到，里面包含了很多 js 的 script。现在再来运行一下 app，成功了：