React Native第三方组件库汇总

项目地址: https://github.com/wix/react-native-ui-lib

9,React Native Paper

React Native Paper是一个跨平台的 UI 组件库,它遵循 Material Design 指南,提供了全局主题支持和可选的 babel 插件,用以减少捆绑包大小。

React Native Paper 项目地址:

https://github.com/callstack/react-native-paper

Expo 示例应用程序:

https://expo.io/@satya164/react-native-paper-example

10,React Native Vector Icons

React Native Vector Icons是一组 React Native 的可定制图标,支持 NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用,而且被数千个应用程序以及其他 UI 组件库(如 react-native-paper)所使用。

项目地址: https://github.com/oblador/react-native-vector-icons

示例项目:https://oblador.github.io/react-native-vector-icons/

11,Teaset

Teaset是一个 React Native UI 库,提供了 20 多个纯 JS(ES6)组件,用于内容显示和动作控制。虽然它的文档不够详尽,但它简洁的设计吸引了我的眼球。

项目地址:https://github.com/rilyu/teaset

其他库

1,antd-mobile

antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件。

项目地址:https://github.com/ant-design/ant-design-mobile

2,react-native-button

react-native-button是github上一个开源的button组件,目前仍保持比较快的更新频率,提供比较丰富的Button功能。

项目地址:https://github.com/ide/react-native-button

3,react-native-image-viewer

react-native-image-viewer是一个图片大图浏览的库,点击图片可以放大缩小。

项目地址:https://github.com/ascoders/react-native-image-viewer

4,react-native-image-picker

react-native-image-picker是实现多个图像选择、裁剪、压缩等功能的第三方库,可以使用该库实现图片、照相等操作。

项目地址:https://github.com/react-community/react-native-image-picker

5,react-native-picker

react-native-picker是React native最常见的滚轮控件,可以实现单滚轮、双滚轮和三滚轮效果。

项目地址:https://github.com/beefe/react-native-picker

6,react-native-scrollable-tab-view

react-native-scrollable-tab-view是一个带有TabBar和可切换页面的控件。,在Android中可以看成是ViewPager和TabLayout的结合。

项目地址:https://github.com/happypancake/react-native-scrollable-tab-view

7,react-native-app-intro

react-native-app-intro是实现引导页的库,当然开发者也可以自己手动实现。

项目地址:https://github.com/fuyaode/react-native-app-intro

8,3D Touch

3D Touch是实现React native 3D Touch的库,可以用此库很方便的实现3D Touch。效果如下:

项目地址:https://github.com/jordanbyron/react-native-quick-actions

9,react-native-snap-carousel

react-native-snap-carousel是可以实现复杂效果的轮播图库,实现的效果如下:

除此之外,还可以实现Galley效果等多种效果。

项目地址:https://github.com/archriss/react-native-snap-carousel

10,react-native-blur

react-native-blur是专门用于实现毛玻璃效果的。

项目地址:https://github.com/react-native-community/react-native-blur

11,react-native-actionsheet

react-native-actionsheet是实现底部弹框的组件,可以在Android和iOS平台上共用,当然也可以自己封装实现。

项目地址:https://github.com/beefe/react-native-actionsheet

12,react-native-popover

react-native-popover是React Native开发中常见的弹出提示框操作,其效果如下图所示:

13,react-native-charts-wrapper

图表在移动开发中应用的场景可谓非常多,这里介绍一款使用的比较多的库。

项目地址:https://github.com/wuxudong/react-native-charts-wrapper

14,react-native-spinkit

react-native-spinkit是一个很炫的加载动画第三方库,可以根据实际情况定制加载的动画。

https://github.com/maxs15/react-native-spinkit

15,Facebook Design-iOS 10 iPhone GUI

Facebook Design-iOS 10 iPhone GUI是iOS 10 公开版的 GUI 元素模板,包括 Sketch、Photoshop、Figma、XD 和 Craft。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native中封装原生第三方SDK的步骤如下: 1. 创建一个原生模块(Native Module),以便React Native应用程序可以与原生代码进行交互。对于iOS,你需要创建一个Objective-C或Swift类;对于Android,你需要创建一个Java类。 2. 在原生模块中编写代码,调用第三方SDK的API并将其封装为JavaScript可以调用的函数。你可以使用React Native提供的RCT_EXPORT_MODULE宏将该模块导出到JavaScript中。例如,下面是一个在iOS中封装Facebook SDK的例子: ```objective-c #import <FBSDKCoreKit/FBSDKCoreKit.h> #import <React/RCTBridgeModule.h> @interface MyFacebookModule : NSObject <RCTBridgeModule> @end @implementation MyFacebookModule RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(login:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { FBSDKLoginManager *loginManager = [[FBSDKLoginManager alloc] init]; [loginManager logInWithPermissions:@[@"public_profile", @"email"] fromViewController:nil handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) { if (error) { reject(@"login_error", error.localizedDescription, error); } else if (result.isCancelled) { reject(@"login_cancelled", @"User cancelled login", nil); } else { resolve(result.token.tokenString); } }]; } @end ``` 这个模块导出了一个名为`login`的函数,该函数会登录Facebook,并返回一个Promise,该Promise将在登录成功后解析为一个Facebook访问令牌,或在登录失败时拒绝。 3. 在JavaScript中导入原生模块,并使用它提供的函数。例如,你可以使用以下代码在React Native应用程序中调用上述iOS模块: ```javascript import { NativeModules } from 'react-native'; const { MyFacebookModule } = NativeModules; MyFacebookModule.login() .then(token => console.log(`Facebook access token: ${token}`)) .catch(error => console.error(`Failed to login: ${error}`)); ``` 这个代码导入了名为`MyFacebookModule`的原生模块,并调用其`login`函数。当该函数返回时,它会返回一个Promise,你可以使用该Promise来处理成功或失败的情况。 通过将原生第三方SDK封装到React Native模块中,你可以轻松地在React Native应用程序中使用该SDK,并将其与JavaScript代码无缝集成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值