Logo

菜单

发布于 2026-01-06 0 阅读
0

21 个适用于 React Native 的实用开源软件包

21 个适用于 React Native 的实用开源软件包

封面图片

引言

我们生活在一个多元化的世界，但移动设备市场却被两大平台——iOS 和 Android——所主导。虽然竞争异常激烈，但这并不意味着移动应用开发就容易。iOS 应用使用 Objective-C 或 Swift 编写代码，而 Android 应用则使用 Java。除了编程语言不同之外，这两个移动平台的工具链也截然不同。

为了创建可在各种设备上运行的应用程序，许多现代开发者会使用 HTML、CSS 和 JavaScript 构建混合应用程序——就像编写网页一样——并将其封装在原生容器中。这样，你几乎可以使用同一套源代码来开发 iOS 和 Android 应用程序。

近年来，混合框架已从基于 Web 视图发展到使用原生 API。这种跨平台移动应用开发方法有利有弊。优点包括耗时更短、成本更低，缺点则包括性能问题。

React Native 是跨平台开发领域的绝佳选择之一。它由 Facebook 开发，并被特斯拉汽车、沃尔玛实验室、Uber、Instagram 工程团队、Discord、Wix 等众多公司和企业所采用。

简而言之，React Native 允许您构建外观、体验和性能都更接近原生应用的移动应用。对开发者而言，好处在于他们几乎可以使用与构建 Web 应用相同的概念。

下面列出的是您可以在 React Native 应用中使用的顶级开源库概览。

实用的开源 React Native 包

lottie-react-native

Lottie 是一个适用于 Android 和 iOS 的移动应用库，它可以解析使用 bodymovin 导出的 JSON 格式 Adob​​e After Effects 动画，并在移动设备上进行原生渲染。这款 npm 模块拥有超过 1 万颗 star，可以帮助你在 React Native 应用中使用社区或自定义构建的动画。

https://github.com/react-native-community/lottie-react-native

react-native-vector-icons

react-native-vector-icons如果您正在考虑使用支持导航栏/标签栏、图片源和完整样式的可自定义图标，那么这个库是您的理想之选。这个 npm 模块捆绑了以下知名的图标库：

  • FontAwesome
  • 离子图标
  • 邪恶偶像
  • 蚂蚁设计
  • MaterialIcons
  • 八面体

还有更多功能。它就像把所有库的最佳功能都集中在一个地方，您无需经历连接多个库并将它们与 React Native 应用链接的繁琐过程。它还支持使用 React Native 的动画库来实现动画效果Animated。

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

react-native-gifted-chat

聊天应用是移动应用开发的重要组成部分。您可以构建完整的聊天应用，也可以将其作为一项功能添加到现有应用中。无论哪种情况，此模块都能帮助您快速上手用户界面。此 npm 模块提供完全可定制的组件、日期、多种文本输入选项、Redux 支持等等。

https://github.com/FaridSafi/react-native-gifted-chat

react-native-image-picker

对于任何需要上传或处理图像的应用来说，这都是一个非常必要的库。它支持从图库中选择图片以及使用相机拍照等功能。我喜欢这个库的另一个实用功能是可以选择图像质量。这项功能可以有效解决高分辨率图像带来的内存问题。

https://github.com/react-native-community/react-native-image-picker

react-native-progress

在应用程序中显示加载进度或其他操作进度非常重要。该库使用 ReactART，支持线性进度条、圆形进度条、饼图等 5 种不同的组件，使进度显示变得轻松便捷。

import * as Progress from 'react-native-progress';

<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />
Enter fullscreen mode Exit fullscreen mode

https://github.com/oblador/react-native-progress

Nativebase

NativeBase 是一个简洁、巧妙且动态的前端框架，它使用 React Native 的现成通用组件，构建跨平台的 Android 和 iOS 移动应用。NativeBase 的最大优势在于它支持跨平台共享 UI 组件，这将显著提升您的开发效率。其文档提供了每个组件的详细规范，并支持自定义。无论您是独立开发、快速构建 MVP 原型，还是专注于应用的功能，NativeBase 这样的组件库都是您的理想之选。

https://github.com/GeekyAnts/NativeBase

react-navigation

在 React Native 社区中，导航一直是一个备受争议的话题，直到react-navigation这个包开始变得成熟。随着3最近版本发布，这个 npm 模块现在已成为 React Native 应用中屏幕管理的完整解决方案。它提供

  • 堆栈导航
  • 标签导航
  • 抽屉导航
  • 自定义导航支持
  • Redux 对复杂应用程序的支持

如果你想尝试一下，这里有一个用它构建的很棒的示例应用程序。

https://github.com/react-navigation/react-navigation

react-native-navigation

React Native Navigation 为 React Native 应用在 iOS 和 Android 平台上提供 100% 原生平台导航。它由 Wix 团队开发和维护，是继 React Native 之后第二常用的屏幕导航支持包react-navigation。

这个软件包之所以在社区中常常被列为第二选择，是因为它的安装过程比较繁琐。每次使用它时，都需要手动按照一系列步骤将它与 iOS 构建和 Android Gradle 集成。

react-native-languages

react-native-languages 是一个社区软件包，它可以帮助您在 React Native 应用中集成 i18n-js 库，从而实现应用的国际化和本地化。此外，它还提供了许多实用函数供您使用。例如，要获取当前设备的语言，您可以编写以下代码。

import RNLanguages from 'react-native-languages';

// Get Current device language
console.log('language', RNLanguages.language);
Enter fullscreen mode Exit fullscreen mode

https://github.com/react-native-community/react-native-languages

react-native-billing

此库专用于 React Native 和 Android 开发。当您需要为 Android 应用添加应用内购买功能时，请使用此库。该工具界面简洁，通过封装 anjlab 的InApp Billing库作为桥梁。此库已更新至最新版本，并支持 ES6 特性async/await。

import InAppBilling from "react-native-billing";

async purchase() {
  try {
    await InAppBilling.open();
    const details = await InAppBilling.purchase("android.test.purchased");
    console.log("You purchased: ", details);
  } catch (err) {
    console.log(err);
  } finally {
    await InAppBilling.close();
  }
}
Enter fullscreen mode Exit fullscreen mode

https://github.com/idehub/react-native-billing

react-native-iap

这是一个基于 React Native 的链接库项目，用于 Android 和 iOS 平台的应用内购买。该项目的目标是在两个平台上实现一致的应用内购买体验。它提供了大量可供使用的辅助函数。Android 平台拥有更多应用内购买功能。

https://github.com/dooboolab/react-native-iap

tcomb-form-native

表单比图标或组件复杂得多，因为它们包含许多不同的部分，并且在字段验证和表单提交方面涉及逻辑。有了这个库，您可以极大地简化表单处理。它提供多种平台特定的配置。使用此库，您可以编写更少的代码，获得更好的可用性和可访问性，并且无需在领域模型更改时更新表单。

https://github.com/gcanti/tcomb-form-native

福米克

表单处理是优秀 Web 开发人员最重要的技能之一。如果您使用 React Native 开发移动应用程序，这一点同样适用。这是一个小型库，可以帮助您在 React 中创建表单，并简化表单构建过程。它允许您获取表单状态的值、验证表单并获取错误消息，以及高效地提交表单。

https://github.com/jaredpalmer/formik

重制版

在 React 和 React Native 的生态系统中，Redux 在应用程序状态管理方面扮演着至关重要的角色。Redux 可以帮助你编写行为一致、可在不同环境（客户端、服务器端和原生）运行且易于测试的应用程序。使用 Redux，你可以查询、选择、插入和更新数据库中的记录。Redux 还提供了一个非常实用的功能——实时编辑代码。Redux 可以与任何 UI 层配合使用，并拥有庞大的插件生态系统，能够满足你的各种需求。

https://github.com/reduxjs/redux

redux-form

这是另一个维护良好的 React Native 应用表单构建库。除了使用 Redux 管理状态之外，该库还允许您跟踪常见的表单状态，例如焦点字段、表单中的字段、用户交互过的字段、字段值等等。

https://github.com/erikras/redux-form

redux-persist

Redux Persist 会将你的 Redux 状态对象保存到持久化存储中。然后在应用启动时，它会检索这个持久化状态并将其保存回 Redux。当数据集变得复杂时，在移动设备本地存储用户数据会变得难以管理。AsyncStorage对于大型应用来说，原生使用 React Native API 也可能比较困难。

https://github.com/rt2zz/redux-persist

React Native 调试器

React Native Debugger 是一个独立的应用程序，可以安装在本地计算机上，用于调试 React Native 应用程序。作为开发者，拥有高质量的调试环境可以提高工作效率，帮助您追踪 bug 并创建新功能。使用此独立应用程序的另一个优势是，它默认集成了 Redux DevTools。因此，如果您的应用程序依赖于 Redux 状态管理库，只需进行最少的配置，即可将其与您的 React Native 应用程序连接起来。

https://github.com/jhen0409/react-native-debugger

React Native Firebase

React Native Firebase 是一个轻量级的 JavaScript 库，它可以帮助您将 React Native 应用连接到适用于 iOS 和 Android 平台的原生 Firebase SDK。此过程旨在尽可能地模拟官方 Firebase SDK。虽然官方 SDK 也支持 React Native，但此库允许您使用 Firebase JS SDK 中不存在的设备 SDK。要在 React Native 中使用官方 SDK，您需要选择 Web 版本。AdMob、Analytics、Cloud Messaging (FCM)、Remote Config、Performance Monitoring 和 Dynamic Links 等功能在官方 Firebase SDK 中不可用。

https://github.com/invertase/react-native-firebase

笑话

Jest 是由 Facebook 创建并发布在 GitHub 上的单元测试框架，用于测试 JavaScript 代码。Jest 是一款功能强大的测试工具，能够适配任何 JavaScript 库或框架。它的优势之一是支持快照测试。

https://jestjs.io/

酶

Enzyme 是 Airbnb 出品的一款测试工具。它支持浅 DOM、全 DOM 和静态渲染。Enzyme 还为开发者提供 API 封装器，旨在简化 React DOM 的断言、操作和遍历。该工具的另一大优势在于它与其他测试库和框架（包括 Jest 和 Mocha）兼容。

排毒

移动端自动化测试最难的部分在于测试金字塔顶端的端到端 (E2E) 测试。Detox 是一个专为 React Native 应用设计的端到端 ( E2E ) 测试库。它能让你像真实用户一样测试应用，但所有测试都是通过代码自动完成的。你只需编写代码，这个测试库就能提供各种工具，让你像真人用户一样浏览应用。

例如，在类似真实用户的设备/模拟器上运行的 Detox 登录屏幕测试如下所示：

describe('Login flow', () => {
    it('should login successfully', async () => {
        await device.reloadReactNative();
        await expect(element(by.id('email'))).toBeVisible();

        await element(by.id('email')).typeText('john@example.com');
        await element(by.id('password')).typeText('123456');
        await element(by.text('Login')).tap();

        await expect(element(by.text('Welcome'))).toBeVisible();
        await expect(element(by.id('email'))).toNotExist();
    });
});
Enter fullscreen mode Exit fullscreen mode

https://github.com/wix/Detox

react-native-mock

这个第三方解决方案相对较新。React-native-mock 可以帮助开发者使用最新版本的 React Native。该库专门用于简化 React Native 应用的测试。

https://github.com/RealOrangeOne/react-native-mock

ESLint

最后，我要向大家介绍几乎所有 JavaScript 开发者都在使用的首选代码检查库：ESLint。它是一个可插拔的 JavaScript 代码检查工具，能够帮助程序员在执行代码之前发现问题。ESLint 的一大优势在于它允许开发者创建自定义代码检查规则。我个人更喜欢使用 Airbnb 团队提供的规则，并在此基础上进行一些调整。

https://eslint.org/

结论

还有其他一些库和模块可用于 React Native，满足不同的需求。鉴于移动开发在访问各种 API 方面存在诸多挑战，未来预计会有更多此类库出现。例如，用于网络调用的axios和用于查询 GraphQL API 的 Apollo Client 等库也可以与 React Native 一起使用，就像它们与 React JS 一起使用一样。我认为无需在此赘述。我希望以上列表能为您提供现成的解决方案，帮助您构建更优秀的 React Native 应用程序。

原文发布于此。

关于我

我经常撰写关于Web技术和React Native的文章。您可以在Twitter上关注我，或者订阅下方我的每周新闻简报，即可直接在您的收件箱中收到我的所有教程📧。

文章来源：https://dev.to/amanhimself/21-useful-open-source-packages-for-react-native-309p
Django Channels 入...
你本周的收获是什么？实现数据模型 #41