React Native 环境篇

[zhuSass]

学习一次，随处书写。

概述

使用React为Android和iOS创建本机应用

React Native将本机开发的最佳部分与React（用于构建用户界面的一流JavaScript库）结合在一起。
少用或多用。您现在可以在现有的Android和iOS项目中使用React Native，也可以从头开始创建一个全新的应用程序。

用JavaScript编写-使用本机代码呈现

React原语渲染到本机平台UI，这意味着您的应用程序使用与其他应用程序相同的本机平台API。
许多平台，一个React。创建特定于平台的组件版本，以便单个代码库可以跨平台共享代码。使用React Native，一个团队可以维护两个平台并共享一种通用技术-React。

面向所有人的原生开发

React Native可让您创建真正的本机应用程序，而不会影响用户的体验。它提供了一套核心的像与平台无关本地组件的View，Text和Image直接映射到该平台的原生UI积木。

无缝跨平台

React组件包装了现有的本机代码，并通过React的声明性UI范例和JavaScript与本机API进行交互。这样就可以为全新的开发人员团队进行本机应用程序开发，并且可以让现有的本机团队更快地工作。

快速刷新

保存后立即查看更改。借助JavaScript的强大功能，React Native可让您以闪电般的速度进行迭代。无需等待本地构建完成。保存，查看，重复。

会谈

React Native团队的成员经常在各种会议上发表演讲。您可以在Twitter上关注React Native团队的最新消息

Facebook支持，社区驱动

Facebook在2015年发布了React Native，并一直保持至今。
在2018年，React Native 在GitHub中任何存储库的贡献者数量中排名第二。今天，React Native得到了来自世界各地的个人和公司的支持，包括Callstack，Expo，Infinite Red，Microsoft和Software Mansion。
我们的社区一直在运送令人兴奋的新项目，并通过诸如React Native Windows和React Native Web之类的仓库来探索Android和iOS以外的平台。

谁在使用React Native？

从成熟的《财富》 500强公司到热门的新兴创业公司，成千上万的应用程序都在使用React Native。如果您好奇使用React Native可以完成什么，请查看这些React Native官方展示柜！

与Flutter优缺对比

优势

• 热重装=快速编码。
  
  本质上与Flutter具有相同的功能。
  热重载允许开发人员将新代码直接注入正在运行的应用程序中，从而加快了开发过程。因此，开发人员可以立即看到更改，而无需重建应用程序。
  热重载还保留了应用程序的状态，避免了在完全重载期间丢失它的风险（在基于状态的框架中这是一项关键优势），从而进一步加快了应用程序的开发速度。

• 一个代码库，两个移动平台（以及更多！）。
  
  与Flutter完全相同：编写单个代码库为2个应用程序提供动力-涵盖Android和iOS平台。
  更妙的是，JavaScript通过与Web应用程序共享代码，在编写跨平台应用程序时为您提供了帮助。这是通过创建可编译为目标平台的抽象组件来完成的。

• 它使用一种流行的语言-JavaScript。
  
  React Native使用JavaScript：许多开发人员都熟悉的一种编程语言（尽管Dart仍然不那么广为人知或使用）。而且，如果您是喜欢静态类型编程语言的开发人员，则甚至可以使用TypeScript（JavaScript子集）。

• 开发者的选择自由
  
  React Native使开发人员可以构建跨平台应用程序；不多不少
  优点是React Native 允许开发人员精确地决定他们要使用什么解决方案。两者都根据项目的要求以及开发人员的喜好而定。
  假设，如果开发人员需要决定如何处理全局状态（如何存储和管理应用程序中许多组件中使用的数据），选择路由器库或在JavaScript和TypeScript之间进行选择–他们可以决定是否d倾向于使用自定义的UI库，或者自己编写。

• 相对成熟度。
  
  官方的React Native版本是4年前发布的，因此Facebook团队有足够的时间来稳定API，并专注于解决问题和解决问题。现在，他们正在努力进行一些令人兴奋的改进-例如减小应用程序的大小。

• 活跃而广阔的社区。
  
  React Native有庞大的开发者社区。不仅如此，还有无数的教程，库和UI框架使学习该技术变得容易，并且可以快速，轻松地进行开发。

• 对React开发人员易于学习
  
  我们列表中的这一优势非常针对React开发人员。如果您具有Web开发的背景并且已经使用了流行的React解决方案，则可以轻松地使用React Native，而无需学习新的库。您可以使用相同的库，工具和模式。

• 最多减少50％的测试。
  
  我们可以减少大约50％的自动化测试，因为我们可以创建相同的测试以在两个平台上运行，从而减少了对质量检查团队的需求。它看起来与Flutter应用程序开发中的相同-我们在此处进行了描述。

缺点

• 它不是真正的本地人。
  
  像任何跨平台解决方案一样，UI体验和性能都不会与本机应用程序中的完全相同，而是与之接近。但是，与Flutter相比，使用React Native更容易获得“自然感觉”。如果您希望Flutter应用程序具有本机组件，则需要进行其他工作。

• 开箱即用的零件少。
  
  React Native仅支持开箱即用的基本组件（其中许多组件适用于开箱即用的平台，例如按钮，加载指示器或滑块）。
  就像我们在本段中所说的那样，外部存储库中有许多其他的React Native组件。开发人员可以在项目中使用它们，但这需要额外的精力和时间。
  另一方面，Flutter旨在支持开箱即用的Material Design，因此该框架支持更多的小部件。节省时间。使用Flutter的开发人员可以使用易于定制且跨平台一致的预制窗口小部件来创建大多数视图。

• 开发者的选择自由。
  
  开发人员创建新项目后，他们需要确定要使用哪个导航包以及哪个全局状态管理。了解每个解决方案的细微差别，最终决定要用于项目的最佳解决方案，可能需要花费大量时间。

• 很多废弃的包裹。
  
  React Native拥有大量的库。不幸的是，它们太多是低质量的。或完全被遗弃。
  Dan Abramov建议检查存储库中的问题数量和提交频率，以防止使用废弃的程序包。
  在他关于“您对React Native有什么不满意？”的讨论摘要中，阅读有关React Native当前形状的问题和局限性的更多信息。

• 脆弱的用户界面。
  
  React Native在后台使用本机组件这一事实应该使您充满信心，每次OS UI更新后，您的应用程序组件也将立即升级。
  就是说– 这可能会破坏应用程序的用户界面，但这种情况很少发生。
  更糟糕的是，如果更新导致本机组件API发生某些更改，更新将变得更加危险。好消息？这种事件很少发生。而就Flutter而言（由于框架自行重新创建本机组件的方式），应用程序UI更加稳定。

• 应用比本地应用更大。
  
  用React Native编写的应用程序必须能够运行Javascript代码（JavaScript虚拟机）。Android默认情况下不具有此功能-意味着应用程序需要包括一个支持JavaScript代码的库，从而导致应用程序比其本机Android同类产品更大。
  使用React Native制作的iOS应用程序不会出现此问题，但它们通常仍比本地应用程序大。好消息？如前所述，React Native团队正在努力减少其应用程序的大小,小型轻巧的JavaScript引擎。

RN环境配置

Option:Expo CLI快速入门

• 假设您已安装Node 10 LTS或更高版本，则可以使用npm安装Expo CLI命令行实用程序：npm install -g expo-cli

• watchman 文件查看服务

• 然后运行以下命令来创建一个名为“ AwesomeProject”的新React Native项目，如果卡住了,则可能墙的原因或者网速问题：

expo init AwesomeProject # 创建项目

cd AwesomeProject
npm start || expo start # 运行项目

• 运行您的React Native应用程序
  在iOS或Android手机上安装Expo客户端应用程序，然后连接到与计算机相同的无线网络。在Android上，使用Expo应用程序从终端扫描QR码以打开您的项目。在iOS上，按照屏幕上的说明获取链接。

Option:React Native CLI快速入门

• 安装Node，Python2，JDK(window)。
  我们建议通过Chocolatey（适用于Windows的流行软件包管理器）安装Node和Python2 。React Native还需要Java SE Development Kit（JDK）和Python 2 的最新版本。两者都可以使用Chocolatey安装。打开管理员命令提示符（右键单击命令提示符，然后选择“以管理员身份运行”），然后运行以下命令：choco install -y nodejs.install python2 jdk8.如果您已经在系统上安装了Node，请确保它是Node 8.3或更高版本。如果您的系统上已经有JDK，请确保它是版本8或更高版本。您可以在Node的Downloads页面上找到其他安装选项。

• 安装React Native CLI。
  
  Node随附npm，可让您安装React Native命令行界面。
  在命令提示符或外壳程序中运行以下命令：npm install -g react-native-cli

• Android开发环境
  
  如果您不熟悉Android开发，则设置开发环境可能会有些乏味。如果您已经熟悉Android开发，则可能需要配置一些内容。无论哪种情况，请确保仔细遵循以下几个步骤。
  
  1.安装Android Studio
  下载并安装Android Studio。当提示您选择安装类型时，请选择“自定义”设置。确保选中以下所有框旁边的框：

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)（有关AMD，请参见此处）
  • Android Virtual Device

  然后，单击“下一步”以安装所有这些组件。设置完成后，将显示“欢迎”屏幕，请继续执行下一步。
  
  2.安装Android SDK。Android Studio默认情况下会安装最新的Android SDK。但是，使用本机代码构建React Native应用程序Android 9 (Pie)特别需要SDK。
  
  3.配置ANDROID_HOME环境变量。React Native工具需要设置一些环境变量，以便使用本机代码构建应用程序。
  4.将平台工具添加到Path。在Windows控制面板中的“ 系统和安全性”下，打开“系统”窗格，然后单击“ 更改设置...”。打开“ 高级”选项卡，然后单击“ 环境变量...”。选择路径变量，然后单击编辑。单击“ 新建”，然后将“平台工具”的路径添加到列表中。

更多环境配置详情

RN 基本命令行操作

react-native init NameProject # 创建RN项目
react-native init NameProject --version X.XX.X # 使用特定版本
react-native init NameProject --template typescript # 创建RN TS项目
react-native start --reset-cache 
expo init NameProject # 也可以用expo

react-native run-android # 开发环境下运行RN项目(android)
react-native run-android --variant=release # 测试应用的发布版本,设置签名后，此选项才可用

reqact-native link xxx # 将第三方库与原生进行关联如果发生错误使用gradlew clean清理下

adb shell input keyevent 82 # 利用adb工具命令式打开控制台选项
adb reverse tcp:8081 tcp:8081 # 命令提示符下，然后重新运行项目
adb install apk文件路径
adb uninstall xxx(applicationId) 卸载

rm -f r $TMPDIR/react-* #重置打包程序缓存
watchman watch-del-all # 清除守望者手表

gradlew clean # 清理构建android文件
gradlew bundleRelease # 生成(Google Play)APK,会将运行您的应用程序所需的所有JavaScript捆绑到AAB
gradlew assembleDebug # 编译并打Debug包
gradlew assembleRelease # 编译并打Release的包

npm cache clean --force # npm清除包缓存
yarn cache clean # yarn清除包缓存

# 环境遇到的问题
# bug描述：Starting a Gradle Daemon, 1 busy and 6 stopped Daemons could not be reused, use --status for details
# 解决思路：停止运行Daemon进程
gradle --stop # Gradle会杀死任何闲置了3个小时或更长时间的守护程序，因此您不必担心手动清理它们。
gradle --status # 停止守护程序后，可查看下状态

1. 创建typescript项目 的时候可能会报错，具体详情可点击此处查看即可。
   
2. 上面出现的程序名gradlew需要特别说明下，说起gradlew就要聊聊gradle.介绍简单来说就是gradle会快速迭代版本，如果合作开发项目会导致成员自己下载gradle，导致版本不一，从而手忙脚乱，所以干脆包装起来，统一。因为gradle处于快速迭代阶段，经常发布新版本，如果我们的项目直接去引用，那么更改版本等会变得无比麻烦。而且每个项目又有可能用不一样的gradle版本，这样去手动配置每一个项目对应的gradle版本就会变得麻烦；所以需要包装，引入gradle-wrapper，通过读取配置文件中gradle的版本，为每个项目自动的下载和配置gradle，就是这么简单。我们便不用关心如何去下载gradle,如何去配置进项目来。下面一张图对gradle与RN的关系。
   
   
   
   通过gradle wrapper命令就可以愉快的gradlew了。

问题总结

• Android: Execution failed for task ':app:packageDebug'. > data报这个错误的时候，删除\app\build\outputs\apk\app-debug.apk然后在尝试运行，相关问题连接
• Unable to determine the current character, it is not a string, number, array, or object 删除android/app/build连接
• Unable to load script. Make sure you're either running a Metro server (run 'react-native start) or that your bundle 'index.android.bundle' is packaged correctly for release.点击

RN项目基本所需库

• react-navigation React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航/路由系统解决方案的需求，它完全使用 JavaScript 编写。
• redux 全局状态管理器，解决组件数据通信问题。
• react-native-vector-icons icon图标容器，该库自带字体图标，也可自定义图标文件。
• fetch 与后端通信ajax在这里推荐最新版的apifetch。
• react-native-community/async-storage 本地存储默认是不会带的，需要用该库进行操作，该语法糖与web的localstorage并无差别。
• react-devtools 对react-native界面的dom进行调试。
• react-native-config 解决不同环境(开发、测试、正式)变量配置。

关于react-native我认为最好的环境配置详情可参考taro的taro react-native更详细更全面。