React Native开发工具

无论您要开发哪种环境，工具，库和服务都是每个开发人员生活中的重要组成部分。 React Native也不例外。 在本文中，我将向您介绍一些最佳的UI框架，库，组件，开发工具和Web服务，它们将使您成为一个更快乐，更高效的React Native开发人员。

文字编辑器和IDE

Visual Studio Code是一个文本编辑器，具有内置的IntelliSense，调试和Git集成功能。 对React Native开发真正有利的是它的React Native工具扩展。 这使您可以从命令面板执行React Native命令，添加IntelliSense for React Native API，并在编辑器本身中调试代码。

有关如何为React Native设置Visual Studio Code的更多信息，请查看此博客文章： VSCode for React Native 。

如果您使用的是Atom ，则可以安装Nuclide插件。 该插件是专门为与React Native，Flow和Hack项目一起使用而创建的。 它具有内置的调试器和元素检查器，以及您在Chrome开发者工具中惯用的所有功能。 流支持意味着您可以立即获得自动完成，类型提示和代码诊断功能。

如果您想探索更多的IDE和编辑器选项，请在React Native的十大编辑器上查看此博客文章。

开发工具

开发工具的范围很广，因此我将根据其重点对每个工具进行分组：

• 开发包
• 代码质量
• 测试
• 调试

开发包

当谈到React Native的SDK时， Expo是无与伦比的。 Expo使您无需Android Studio或Xcode即可轻松对应用进行原型制作。 它包括一组组件和库，可帮助您加快开发速度。

博览会工作流程包括以下内容：

1. 使用create-react-native-app创建一个新项目。
2. 在您喜欢的文本编辑器中编写代码。
3. 使用Expo客户端应用程序运行该应用程序。

无需将手机连接到计算机。 只需使用Expo Client应用程序在终端上扫描QR码，它将自动运行您的应用程序。 如果您使用的是Genymotion， Expo也支持 。

使用Expo的唯一缺点是，您不能包括使用该设备的本机功能的任何自定义程序包。 世博会已经包括许多常用的本地包，例如Camera，Facebook和Map。 但是，如果您需要使用他们不支持的程序包，则必须“弹出”您的应用程序。 届时，您的应用程序将好像是使用react-native init创建的一样，并且您还将失去使用Expo客户应用程序运行该应用程序的能力。

代码质量

检查代码质量很重要，这就是为什么存在像ESLint这样的工具的原因。 简而言之，通过使用样式工具可以检查代码，该工具可以使您与代码更加一致。 这样的样式指南的一个示例是AirbnbJavaScript样式指南 ，该指南指定了有关如何编写JavaScript代码的规则。 然后，lint工具会根据这些规则检查您的代码，以确保已遵循它们。 还有一个React项目的样式指南 。

如果您使用的是Sublime Text，这是一个很好的教程，说明如何配置它，以便您在编码时可以实时获得有关代码质量的反馈： Sublime Linting for React和ES6 。 如果您使用的是其他编辑器或IDE，请确保查找使用ESLint的相应插件。

如果要向项目添加静态类型，则可以使用Flow 。 Flow无需在现有代码库上进行任何更改即可在JavaScript之上添加静态类型。 这是因为Flow会尽可能尝试推断类型。 但是，对于新项目，建议您明确指定类型，以充分利用Flow的好处。

要开始使用Flow，这里是一个有关如何为React Native项目设置Flow的教程。

测验

Enzyme是用于React的测试实用程序，它使您可以断言，操纵和遍历组件的输出。 它提供了诸如shallow()来“浅”地渲染您的组件， find()来遍历所渲染的组件，以及expect()来声明道具或组件中所渲染的内容。

您可以按照本指南中的“ 使用酶在React Native中测试组件”来使您的React Native应用可用酶进行测试。 如果您不熟悉酶，则可以阅读有关使用酶和Mocha测试React组件的教程。

调试

Reactotron是一个桌面应用程序，允许您调试React和React Native应用程序。 它的一些关键功能包括检查，修改和订阅应用程序状态，跟踪通过应用程序发出的HTTP请求，对应用程序性能进行基准测试以及跟踪错误。 如果您使用的是Redux，甚至可以在Reactotron内调度动作并跟踪sagas。

样板和UI框架

Snowflake是用于全栈React Native开发的样板。 它包括从应用程序的前端到后端的所有内容。 因此，如果您只想要可以帮助您快速入门的工具，那么您可能会发现Snowflake非常有用。 您可以阅读注释以获取有关使用哪些软件包和工具的更多信息。

或者，您可以使用Ignite 。 它是一个命令行工具，还包括样板，生成器，UI组件的样式指南，API测试工具等。

React Native已经附带了UI组件，您可以使用它们进行用户交互。 问题在于，它们只有最基本的样式才能区分每个组件的外观（例如按钮，复选框）。 如果要添加自定义样式，则必须编写自己CSS代码。

这就是NativeBase的用处 。通过实现与本机Android（材质设计）和iOS（人机界面指南）应用程序相同的设计，它可以使您的应用程序具有真正的本机外观。 开箱即用，您将获得自定义组件，例如“浮动操作按钮”，“微调器”，以及最好的表单组件。

库和组件

React Native背后有一个庞大的社区，因此可以使用很多库和组件。 我们可能整天都在谈论这些，因此，为了简短起见，我将重点介绍以下几个方面：

• 导航
• 状态管理
• 动画
• 常用组件和库

导航

通过React Navigation ，您可以使用其内置的导航器（例如Stack Navigator，Tab Navigator和Drawer Navigator）在React Native应用程序中轻松实现导航。 但这还不止这些：除了应用内导航之外，它还包括深层链接，Redux集成和Web集成。 这使它成为用于实现导航的真正强大的库。

国家管理

MobX提供了更新和管理React使用的应用程序状态的功能。 使它成为React中状态管理的理想之选的是它的简单性和可测试性。 它的学习曲线也很短，因此异步功能和计算值之类的事情已经在后台处理了。

对于更大，更复杂的应用程序，仍然建议使用Redux 。 这是因为MobX非常宽松，与Redux不同，Redux提供了有关如何管理状态的严格指南。 因此，对于有更多人进行的大型项目，这是一个明智的选择。

动画制作

React Native已经内置了一个动画API。 实际上，不仅有一个用于动画的API，而且还有两个API：Animated API和LayoutAnimation。 这两个功能非常强大，但可能很麻烦，特别是如果您只想应用基本动画，例如上下移动对象或使其反弹的话。 在这种情况下，像Animatable这样的组件会派上用场。

常用组件和库

这是React Native项目中常用的组件和库的列表。 这些与Android和iOS设备兼容：

• styled-components ：允许您编写CSS代码来设置React组件的样式。
• react-native-calendar ：用于显示用户可以与之交互的日历。
• react-native- datepicker ：用于选择日期和时间。
• react-native-progress ：用于创建进度条和微调器。
• react-native-spinkit ：加载指标的集合。
• 矢量图标 ：允许您使用自己喜欢的图标字体来源中的图标，例如“真棒字体”和“材质图标”。
• react-native-swiper ：将图像或容器的集合转换为滑动组件。
• react-native-scrollable-tab-view ：可以在之间滑动的选项卡式导航。
• react-native-lightbox ：用于以全屏弹出窗口查看图像。
• react-native-maps ：允许您将Google Maps集成到您的应用程序中。 并非Google Maps API中的所有可用功能都可用，但是在大多数情况下，它提供的功能应该足够了。
• SGListView ：React Native内置的ListView组件的内存友好实现。 如果您需要在应用程序中显示庞大的列表，请使用此列表代替ListView。
• Formik ：减少在React Native中处理表单的痛苦。 它使您可以获取值和不输入表单状态，验证表单并处理其提交。
• react-native-i18n ：用于在您的应用中实现国际化。
• react-native-push-notification ：实现本地和远程推送通知。
• InstantSearch ：用于实现搜索的组件的集合。
• react-native-fs ：允许您访问设备的本机文件系统。
• react-native-camera ：一种相机组件，可让您从应用程序中拍摄照片和视频。
• react-native-video ：用于播放来自文件系统或URL的视频。
• react-native- sqlite -storage ：用于存储和处理SQLite数据库中的数据。
• react-native-store ：基于AsyncStorage的键值存储。
• react- native - webrtc ：用于实现WebRTC。

网页服务

您可以使用网络服务构建无服务器应用程序并简化React Native应用程序的部署。 那里有大量的Web服务，但我将重点关注以下领域：

• 数据库
• 分析
• 推送通知
• 代码更新
• 持续集成

数据库

Realm是专注于移动应用程序的实时数据库。 它包括双向数据同步，脱机优先功能和数据推送等功能。 Realm移动数据库是开放源代码和跨平台的，这意味着您可以在自己的服务器上托管Realm对象服务器，然后免费使用Realm JavaScript库 。

并非所有功能都可以在开发人员版本中使用，但是在大多数使用情况下，仅使用开发人员版本就可以了，因为它包括对象数据库，实时同步和身份验证等核心功能。 以下是每个版本的比较： Realm产品和定价 。

如果Realm不能满足您的需求，那么您始终可以使用React Native随附的AsyncStorage API 。

分析工具

Fabric是一项多合一的服务， 除其他功能外 ，它还允许您在应用程序中添加分析。 有Answers ，可为您提供有关应用程序使用情况的实时统计信息。 这包括活动用户数，会话长度和保留率。 还有Crashlytics ，它为您提供了强大的崩溃报告功能。 所有这些都是实时发生的，您可以在Fabric的实时仪表板中查看它。 您可以使用Fabric库轻松为React Native应用设置Fabric。

如果您希望使用久经考验的解决方案（例如Google Analytics（分析）），那么还有一个库可让您执行此操作。

推送通知

在应用程序中实现推送通知时，实际上没有竞争。 Firebase Cloud Messaging （以前称为Google Cloud Messaging）可让您向Android和iOS应用发送推送通知。 您可以使用react-native-fcm软件包从您的应用程序与FCM通信。

代码更新

通过CodePush ，您可以将代码更新直接部署到移动应用中，并部署到用户的设备上。 CodePush充当中央存储库，您可以在其中部署对HTML，CSS，JavaScript和图像等资产的更改。 应用程序中相应的CodePush代码随后将提取这些更改。 这非常适合将错误修复推送到应用程序，而无需将其上载到应用程序商店中并等待用户更新应用程序。 您可以使用此包从React Native应用程序中的CodePush中获取更新。

持续集成

Bitrise是用于移动应用程序开发的持续交付服务。 它使您可以运行测试，构建应用程序，并在每次部署代码时将其自动推送到用户的设备。

在开发工作流的每个步骤中，Bitrise均与一系列服务集成 。 例如，当您推送到GitHub上的发行分支时，通过Webhooks通知Bitrise。 然后它将开始运行测试。 一旦测试通过，构建过程就会开始。 如果只是“软版本”（例如，对JavaScript代码的更改），则可以通过CodePush将更改部署到用户。 但是，如果对本机代码进行了更改（例如，添加了Camera插件），则Bitrise还可以构建APK或IPA文件，并将其部署到Google Play或iTunes Connect。

Fastlane是工具的集合，这些工具可以自动完成Android和iOS应用的构建和发布过程。 对于iOS，它处理诸如运行测试，生成屏幕截图，代码签名以及将应用发布到应用商店之类的任务。 它还包括Beta测试工具，例如“试点”和“登机”。 Pilot可让您直接从命令行将应用程序上载到iTunes Connect并管理TestFlight beta测试人员。 登机会为TestFlight Beta测试人员创建一个注册页面。

这些工具更适合iOS部署，但是如果您部署Android应用程序，也可以从中受益。 当前，只有两种工具可用于Android部署：Supply和Screengrab。

供应可让您自动上载资产，例如应用程序图标，促销图片和应用程序的屏幕截图。 它还允许您更新Google Play商店中的现有应用。

另一方面， Screengrab可以自动生成多个设备的屏幕截图。 如果您的应用支持多种语言，则每个屏幕截图也可以进行本地化。

结论

而已！ 在本文中，您了解了开发React Native应用程序时可以使用的一些工具，库和服务。 你呢？ 在React Native中开发应用程序时，您会使用哪些工具？

翻译自: https://code.tutsplus.com/articles/tools-for-react-native-development--cms-29791