今天开始来写跨平台技术,比较有名的就是 Facebook 的 React Native 和 Google 的 Flutter,目前 Flutter 正如日中天,因为体验更接近原生。先来几篇文章看看 React Native。
目录:
- 环境搭建
- 创建新应用
- 运行出现的问题
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,成功了: