阅读 727

【译】React Native 常用的 15 个库

译者:前端小智

原文:codingislove.com/top-15-reac…

本篇 React native 库列表不是从网上随便找的, 这些是我在我的应用中亲自使用的库。 这些库功能可能跟其它库也有,但经过大量研究并在我的程序中尝试后,我选择了这些库。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

15. React Native Animatable

图片描述

这个库非常适合快速地向 React Native 应用程序添加简单的动画和转换。这个库有两种使用方式:声明式和命令式

声明式用法只需使用动画的名称,该动画将在加载该元素时立即生效。打开页面时,标题应该从左边滑进去。

如果你想手动播放动画,这个wgy命令式用法就很好用。当有人喜欢某个帖子时,摇动一个心形图标。

你也可以定义你自己的动画!对于复杂的动画,可以查找 React Native 的 Animated 的 API。

实际案例

图片描述

14. React Native Push Notification

这个库支持本地推送通知功能比较全面。它具有日程通知、基于日、周、时间的重复通知等其他库中没有的功能。

如果你的应用程序具有离线可用并且需要推送通知,则此库是你的选择。

13. React Native FCM

如果你的应用程序需要使用 GCM 或 FCM 从服务器发送远程通知,那么这个库就你选择之一,FCM 只是 GCM 的最新版本。

这个库还支持带有调度和重复支持的本地通知。因此,如果你同时需要远程和本地通知,那么可以使用 response-native-fcm

12.React Native Hyperlink

图片描述

一个简单的 react-native 超链接组件的可以让 url,模糊链接,电子邮件等可点击。它还支持样式化链接。只要将 Text 组件作为子组件传递给 Hyperlink 组件,库就会处理一切。

实际案例

clipboard.png

11. React Native Sound

你需要在应用中播放声音或音乐的库。 我使用这个库来播放应用程序声音并播放录制的答案。

实际案例

下面是React native应用程序声音的演示视频:

youtu.be/DpE_8j-aq0I

10. React Native loading spinner overlay

图片描述

一个简单但非常有用的组件。当你希望阻止用户在处理某些内容时执行任何其他操作时,你可以使用此组件。 通过在 Android 中处理后退按钮,该组件也做得很好。 示例:提交帖子

9. React Native Progress

在应用程序中,显示加载或任何其他操作的进度是很重要的。这个库通过支持5个不同的组件,如线性进度条、圆形、饼状图等,可以很容易地显示进度。

实际案例

图片描述

8. React Native Swiper

React Native swiper对于实现App intro,Image carousel和Image Galleries非常有用。

下面是React native swiper 的演示视频:

www.youtube.com/watch?v=LdK…

7. React Native Share

与UI自定义分享组件,它还支持分享文件。

实际案例

图片描述

6. React Native Photo View

具有缩放支持,onload 回调,缩放以适应和滚动指示器支持的 Image 组件。 此组件存在高分辨率图像问题。 当然,这不是React Native 的特定问题。 当存在高分辨率图像时,内存问题在 Android 上很常见。

5. React Native Image Picker

这是图像上传或图像处理的基本库。 它支持从图库中选择,从相机拍摄照片。 我喜欢这个库中另一个有用的功能是选择图像分辨率的选项,此功能解决了由于高分辨率图像导致的内存问题。

clipboard.png

4. React Native Simple Store

这个库只是 React Native 的内置 AsyncStorage API的封装,但它非常有用,因为它具有Promises、l链式调用和超级简单的 API 等特性。

3. React Native Vector Icons

这是最好的 Icon 组件。 它捆绑了 10 个图标集,图标按钮组件,还允许你使用字形图,Fontello 和 TTF 文件导入自定义图标集。

捆绑图标集:

  1. Entypo by Daniel Bruce (411 icons)
  2. EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 70 icons)
  3. FontAwesome by Dave Gandy (v4.7.0, 675 icons)
  4. Foundation by ZURB, Inc. (v3.0, 283 icons)
  5. Ionicons by Ben Sperry (v3.0.0, 859 icons)
  6. MaterialIcons by Google, Inc. (v3.0.1, 932 icons)
  7. MaterialCommunityIcons by MaterialDesignIcons.com (v2.0.46, 2046 icons)
  8. Octicons by Github, Inc. (v5.0.1, 176 icons)
  9. Zocial by Sam Collins (v1.0, 100 icons)
  10. SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

2. React Native Modalbox

这个 Modal 库是基于 React Native 的 Modal组件构建的,但附带了许多自定义和功能。 它具有在应用程序中使用 Modals 所需的所有功能。

实际案例

图片描述

1. React Native Router Flux

图片描述

导航是 React Native 社区中的主要问题之一,因为它没有默认导航系统。 无论 React Native 出现什么导航系统总是有变化或不稳定。

这个库帮助我使用一个非常简单的声明性API快速实现导航。 它维护一堆路线并从应用程序中的任何场景导航到任何场景就像调用函数一样简单。

它也支持选项卡式导航,侧边栏和模态框。 可以将模态框定义为场景,以便可以从任何场景调用模态。

你可以已经在用 React-Navigation 了,并想知道我为什么要使用 React Native Router Flux? 不要担心 React Native Router flux v4 基于 React-Navigation 并且具有更简单的 API!

上面的大多数应用程序演示都使用 React-native-router-Flux 作为导航系统。

总结

如果你使用一个不在上面列表中的真棒React Native库,请在下面的评论中告诉我!

你的点赞是我持续分享好东西的动力,欢迎点赞!

交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

github.com/qq449245884…

我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

关注公众号,后台回复福利,即可看到福利,你懂的。

关注下面的标签,发现更多相似文章
评论