10个必备的ReactNative组件

type

Post

status

Published

date

Oct 27, 2024

slug

10-must-have-react-native-components

summary

在React Native的世界中，目的是为了构建高性能的APP。除了React Native提供的组件（Components），还有一个强大的React Native社区，提供了很多丰富实用的组件。今天我们就来罗列出React Native十款优秀的组件。

丰富的社区

在React Native的世界中，目的是为了构建高性能的APP。除了React Native提供的组件（Components），还有一个强大的React Native社区，提供了很多丰富实用的组件。

组件分享

今天我们就来罗列出React Native十款优秀的组件。

React Native Bouncy checkbox

简介

React Native的完全可定制的动画bouncy复选框

地址：

react-native-bouncy-checkbox

WrathChaos • Updated Nov 6, 2024

效果

React Native Bottom Sheet

简介

具有完全可配置选项的高性能交互式bottom sheet🚀

地址

react-native-bottom-sheet

gorhom • Updated Nov 6, 2024

效果

React Native Gifted Chat

简介

💬React Native最完整的聊天UI

地址

react-native-gifted-chat

FaridSafi • Updated Nov 6, 2024

效果

静态图

动图

Victory Native Xl

简介

React Native的图表库，专注于性能和自定义。由D3、Skia和React Native的Reanimated提供支持的高性能图表。

地址

victory-native-xl

FormidableLabs • Updated Nov 5, 2024

效果

静态图

动图

React Native Toast Message

简介

React Native 的动画 toast 消息组件

地址

react-native-toast-message

calintamas • Updated Nov 5, 2024

效果

Skeleton-React Content Loader

简介

⚪ SVG 支持的组件可轻松创建骨架载荷。

地址

react-content-loader

danilowoz • Updated Nov 6, 2024

效果

骨架屏的loading形式。

SVG 支持的组件可轻松创建占位符加载（如 Facebook 的卡片加载）。

React Native Pager View

简介

一个用于 React Native 的封装组件，它让开发者可以在 Android 和 iOS 中轻松使用页面滑动切换的功能。

地址

react-native-pager-view

callstack • Updated Nov 6, 2024

效果

Expo Blur view

简介

一个 React 组件，它为会指定内容添加模糊效果。

地址

BlurView

A React component that blurs everything underneath the view.

https://docs.expo.dev/versions/latest/sdk/blur-view/

效果

React Native Calendar

简介

React Native 日历组件 🗓️ 📆，适用于 iOS 和 Android 的声明性跨平台 React Native 日历组件。

地址

react-native-calendars

wix • Updated Nov 6, 2024

效果

FlashList

简介

快速且高性能的 React Native 列表，在低端设备上仍旧具有出色的性能。

它在大量数据的情况下，性能优于原生的FlatList。

地址

FlashList - super fast list for react native

FlashList is a faster alternative to FlatList with a similar API. Migrate in a few seconds and get major performance boost.

https://shopify.github.io/flash-list/

FlashList - super fast list for react native

效果

信息来源

本文整理信息自Youtube视频，方便自己查阅。

视频地址：

10 Must-Have React Native Components 😎

Speed up your React Native app development with these 10 components. Don't reinvent the wheel with every new project! 🔥 Learn React Native FAST: https://galaxies.dev The components: 1. Bouncy checkbox https://github.com/WrathChaos/react-native-bouncy-checkbox 2. Bottom sheet https://github.com/gorhom/react-native-bottom-sheet 3. Gifted Chat https://github.com/FaridSafi/react-native-gifted-chat 4. Charts https://github.com/FormidableLabs/victory-native-xl 5. Toast https://github.com/calintamas/react-native-toast-message 6. Skeleton https://github.com/danilowoz/react-content-loader 7. Pager view https://github.com/callstack/react-native-pager-view 8. Blur view https://docs.expo.dev/versions/latest/sdk/blur-view/ 9. Calendar https://github.com/wix/react-native-calendars 10. FlashList https://shopify.github.io/flash-list/ ############################# ❤️ You can also find me on: Twitter: https://twitter.com/schlimmson Instagram: http://instagram.com/simongrimm_ ############################# #reactnative #reactjs 📌Chapters: 00:00 Intro 00:31 Bouncy checkbox 01:03 Bottom sheet 01:43 Gifted Chat 02:33 Charts 03:24 Toast 04:05 Skeleton 05:16 Pager view 06:28 Blur view 07:32 Calendar 08:32 FlashList 09:26 Outro

https://www.youtube.com/watch?v=wsZ_mjXk6Hg

其他推荐资源

Awesome React Native

awesome-react-native

jondot • Updated Nov 6, 2024

React Native Directory

reactnative.directory

https://reactnative.directory/