react-native优秀第三方库React Native 是一个流行的框架，用于构建原生移动应用。在开发过程中，第三

2025.7.30更新：

legend-list

Legend List 是 React Native 的高性能列表组件，纯粹用 Typescript 编写，没有原生依赖项。它是 FlatList 和 FlashList 的直接替代品，具有更好的性能，尤其是在处理动态大小的项目时。

性能： 它从头开始设计，并针对性能进行了大量优化，在大多数情况下都比 FlatList 和其他列表库更快。

动态项目尺寸： 本机支持不同高度的项目，而不会影响性能。

直接更换： API 与 FlatList 和 FlashList 兼容，以便于迁移。

100% JS： 无需原生模块链接，确保跨平台轻松集成和兼容。

轻量： 我们的目标是使 LegendList 的依赖项尽可能小。对于更高级的用例，我们计划支持可选插件。这确保了我们尽可能小的包装尺寸。

双向无限列表： 支持双向无限滚动，无闪烁或滚动跳跃

没有反转的聊天 UI： 聊天 UI 可以将其内容与底部对齐并在最后保持滚动，这样列表就不需要反转，这会导致奇怪的行为（在动画等中......

react-native-sse

Implementing Streaming Data with EventSource in React Native using react-native-sse

Streaming流式接收数据，实现类似AI大模型对话，逐字输出/接收，打印机效果。

2025.2.21更新：

@umijs/openapi（根据swagger接口文档自动生成request 请求代码，减少重复劳动）

根据 OpenApi3 文档生成 request 请求代码。

参考链接：React/ReactNative + TypeScript 使用后端提供的swagger Json 文件生成service定义

react-native-template（学习别人的开源代码和用法）

一个开箱即用的 React Native 工程脚手架

Features

Typescript 支持
React Hooks
React Query 管理异步请求数据状态&缓存 🚀
Swagger Api Codegen Api 接口 ts 代码生成，可更好结合 react-query 使用，不写请求代码
Zustand 基于 hooks 的状态管理
React Navigation V6 支持 Authentication flow（身份验证流程）和主题
React Native Gesture Handler
NativeBase UI 组件库
React Native Vector Icons
Jest
Eslint (Airbnb config)
Flipper Facebook 开源的 debugger 工具，功能强大。官网下载安装包安装后即可使用。

2025.2.18更新：

yup

Yup 是一个用于运行时值解析和验证的架构构建器。定义架构、转换要匹配的值、断言现有值的形状，或同时定义这两者。Yup 架构具有极强的表现力，允许对复杂、相互依赖的验证或值转换进行建模。

formik

Build forms in React, without the tears.

react-hook-form

Performant, flexible and extensible forms with easy-to-use validation.

gluestack UI库

React & React Native Components & Patterns，copy-paste components & patterns crafted with Tailwind CSS (NativeWind)

react-native-dnd 拖拽排序

React Native 是一个流行的框架，用于构建原生移动应用。在开发过程中，第三方库可以极大提升开发效率和应用性能。以下是一些在React Native社区中广受好评的第三方库：

    "@ant-design/react-native": "^5.0.4",
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-camera-roll/camera-roll": "^5.9.0",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^4.4.3",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-picker/picker": "^2.5.1",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "@yz1311/react-native-signature-pad": "^0.1.5",
    "axios": "^1.5.0",
    "dayjs": "^1.11.10",
    "deprecated-react-native-prop-types": "^4.2.1",
    "geolib": "^3.3.4",
    "i18n-js": "^3.5.1",
    "jcore-react-native": "^2.1.5",
    "jpush-react-native": "^3.0.6",
    "patch-package": "^8.0.0",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-amap-geolocation": "^1.2.3",
    "react-native-amap3d": "^3.2.4",
    "react-native-asset": "^2.1.1",
    "react-native-audio": "https://gitee.com/inkCrazy/react-native-audio.git",
    "react-native-biometrics": "^3.0.1",
    "react-native-calendars": "^1.1301.0",
    "react-native-camera": "^4.2.1",
    "react-native-device-info": "^10.11.0",
    "react-native-drag-sort": "^2.4.4",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-easy-chat-ui": "^0.4.14",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.13.1",
    "react-native-get-random-values": "^1.9.0",
    "react-native-image-crop-picker": "^0.40.0",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-localize": "^3.0.2",
    "react-native-mmkv": "^2.10.2",
    "react-native-modal": "^13.0.1",
    "react-native-qrcode-svg": "^6.3.0",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "^4.7.2",
    "react-native-screens": "^3.25.0",
    "react-native-shared-group-preferences": "^1.1.24",
    "react-native-snackbar": "^2.6.2",
    "react-native-sound": "^0.11.2",
    "react-native-storage": "^1.0.1",
    "react-native-toast-message": "^2.6.2",
    "react-native-svg": "^15.1.0",
    "react-native-video": "^5.2.1",
    "react-native-view-shot": "^3.8.0",
    "react-native-webview": "^13.6.0",
    "rn-qr-generator": "^1.3.1",
    "uuid": "^9.0.1",
    "zustand": "^4.5.2"

24jieqi.github.io/react-nativ…

第三方组件【小暑】里面提到了一些第三方组件：

我们推荐使用以下社区已有的优秀实现，与 小暑 形成互补。

rnmapbox/maps: A Mapbox react native module for creating custom maps (github.com)（地图类）

A community-supported, open-source React Native library for building maps with the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android

社区维护的新版本，React Native (0.70+, older versions from 0.64+ might or might not work)

A Babel plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules. It also allows you to setup a custom alias for directories, specific files, or even other npm modules.
一个Babel插件，用于在使用Babel编译代码时为您的模块添加新的解析器。这个插件允许你添加新的包含你的模块的“根”目录。它还允许您为目录，特定文件甚至其他npm模块设置自定义别名。

react-native-dotenv【推荐】

Using a solution to load environment variables for your React Native application is Very important to make maintaining your keys and URLs an easy task.
使用解决方案为React Native应用程序加载环境变量对于使维护密钥和URL成为一项简单的任务非常重要。

There are multiple solutions like react-native-config which the most popular one but the library requires Native linking and adding or updating new environment variables mean rebuilding the App.
有多种解决方案，如react-native-config，这是最流行的一种，但库需要本地链接，添加或更新新的环境变量意味着重建应用程序。

Also, react-native-config comes with the possibility to use environment variables on native code (Android/Obj-C) but this requires manual steps to follow.
此外，react-native-config还可以在原生代码（Android/Obj-C）上使用环境变量，但这需要手动操作。

The 2nd solution which we recommend to use is react-native-dotenv, a babel plugin that can Load environment variables using import statements.
我们推荐使用的第二个解决方案是react-native-dotenv，一个可以使用import语句加载环境变量的babel插件。

react-native-config

React Native bootsplash【推荐】

A splash screen API for react-native which can programatically hide and show the splash screen. Works on iOS and Android.
一个用于react-native的闪屏API，可以以图解方式隐藏和显示闪屏。适用于iOS和Android。

比React Native Splash Screen更好。

react-native-error-boundary

介绍：react-native-error-boundary.js.org/

A simple and reusable React-Native error boundary component 🐛
一个简单且可重用的React-Native错误边界组件

react-native-boring-avatars

react-native-boring-avatars 生成随机头像，官网：boringavatars.com/

截屏2024-04-22 14.36.55.png

react-native-flex-layout

react-native-flex-layout.js.org/docs/gettin…

react-native-gradle-plugin

react-native-ui-kitten

UI Kitten 是一个 React Native UI 库，可让您创建令人惊叹的多品牌跨平台移动应用程序。该库基于 Eva Design System，为设计和开发过程带来了一致性和可扩展性。它包含一组以类似方式设计的通用 UI 组件。最棒的是：主题可以在运行时更改，无需重新加载应用程序。

截屏2024-04-22 14.45.29.png

react-native-iconfont-cli

用纯JS把iconfont.cn的图标转换成RN组件，不依赖字体，支持多色彩，支持热更新

痛点

通常地，当我们想在RN里使用iconfont，我们可能会借助react-native-vector-icons导入ttf字体文件，或者直接手动下载各个svg文件到本地，然后单个使用。

使用ttf字体有一个弊端，就是每次更新图标，都要相应的更新ttf文件，然后再次打包发布APP。而且ttf不支持多种色彩的图标，导致所有图标都是单色。如果你是借助react-native-vector-icons，该库内置了10多套ttf文件，合起来有2M左右；你可能用不到它们，但是它们仍然会被打包进你的APP里。

下载svg到本地也不方便，因为你需要额外维护一份图标字体，有可能造成线上和本地的图标不一致问题。而且如果你想动态地改变svg的渲染色彩，基本上是不可能的，只能渲染原图的颜色。

为了解决这些问题，我用纯Javascript实现iconfont到React组件的转换操作，不需要依赖ttf字体文件，不需要手动下载图标到本地。

react-native-logs

Performance-aware simple logger for React-Native, Expo (managed and bare) and react-native-web with custom levels and transports (colored console, file writing, etc.).
用于React-Native，Expo和react-native-web的性能感知简单记录器，具有自定义级别和传输（彩色控制台，文件写入等）。

react-native-drop-shadow

react-native-network-logger

An HTTP traffic monitor for React Native including in app interface.
React Native的HTTP流量监控器，包括应用程序接口。

An alternative to Wormholy but for both iOS and Android and with zero native dependencies.
Wormholy的替代品，但适用于iOS和Android，并且具有零本地依赖性。

flash-list

高性能列表

Fast & performant React Native list. No more blank cells.

Swap from FlatList in seconds. Get instant performance.

i18next

本地化参考链接：# How to use i18next, react-i18next in React Native.

react-native-modalize

A highly customizable modal/bottom sheet that loves scrolling content.
一个高度可定制的模态/底部表单，喜欢滚动内容。

This component has been built with react-native-gesture-handler to address the common issue of scrolling, swiping and handling the keyboard behaviors, you can face with react-native's modal.
这个组件是用 react-native-gesture-handler 构建的，用来解决滚动、滑动和处理键盘行为的常见问题，你可以用react-native的modal来面对。

This component comes with a ScrollView, the default renderer, a FlatList or a SectionList. They are all three built-in and make your life easier, just pass your content and Modalize will handle the rest for you. You can also have the possibility to pass your own custom renderer.
该组件附带了ScrollView、默认渲染器、FlatList或SectionList。它们都是内置的，使您的生活更轻松，只需传递您的内容，Modalize将为您处理其余部分。您还可以传递自己的自定义渲染器。

Support 支持

Volume ( with listener)
Brightness
Wifi switch
Location 位置
Bluetooth 蓝牙
Airplane

react-native-video-player

视频上下滑动调节音量、屏幕亮度、长按左右两边快进退、左右滑动以及拖动进度条调节视频进度，视频控件锁定，全屏切换，缓存进度，双击视频暂停，等功能，基于react-native-video
ps：Android改变亮度无需获取高级权限，只改变当前active也就是当前页面的亮度，改变亮度后，返回进入到其他页面会恢复到原来的亮度。
如果你的视频全屏后尺寸没发生改变，参考全屏尺寸问题18
Version 2.x requires react-native >= 0.60.0
Version 1.3.2 requires react-native <= 0.59.9

还可以从这个网站，根据排行和分类查找： www.awesome-react-native.com/#Components…

截屏2024-07-02 14.40.29.png

Tools :

参考链接：

handbook.obytes.com/docs/mobile…
starter.obytes.com/overview/
github.com/obytes/reac…
gitee.com/react-nativ… （鸿蒙适配主流第三方库列表，也可以看出大家都在用什么库）

react-native优秀第三方库