最近负责项目的rn模块,平常因为很多功能需求,需要用到rn的开源组件,这边分享一下。
录音 react-native-audio
录音播放 react-native-sound
百度地图 react-native-baidu-map
单图片选择 裁剪 react-native-image-picker
多图选择 裁剪 react-native-image-crop-picker
图片放大查看 react-native-image-zoom-viewer
持久化存储 react-native-storage
导航 react-navigation
截屏 react-native-view-shot
热更新 react-native-code-push
字体库图标 react-native-vector-icons
微信 react-native-wechat
支付宝 react-native-alipay
获取设备信息 react-native-device-info
国际化 react-native-i18n
文件操作 react-native-fs
数据库 react-native-sqlite-storage
图像处理 react-native-transformable-image
生成二维码 react-native-qrcode
扫描二维码 react-native-camera
统计图表 react-native-chart
统计图表 react-native-pathjs-charts
激光推送 jpush-react-native
联系人获取 react-native-contacts
背景渐变色 react-native-linear-gradient
app启动白屏优化 react-native-splash-screen
底部Tab react-native-tab-navigator
滑动/轮播 react-native-swiper(安卓下不能垂直滚动) @nart/react-native-swiper(这个可以垂直滚动)
特别轮播图: react-native-snap-carousel
模态窗口:https://github.com/react-native-community/react-native-modal
显示HTML代码 react-native-render-html
动画 react-native-animatable
Tab选项卡 react-native-scrollable-tab-view
签名插件:react-native-signature-capture
微信(分享、支付等功能): https://github.com/yorkie/react-native-wechat
支付宝: https://github.com/huangzuizui/rn-alipay
文件下载:react-native-fs (react-native link后需要在android/app/build.gradle文件的dependencies加上compile project(':react-native-fs'))
数据存储: react-native-simple-store(当然选简单的咯) react-native-storage(复杂点)
图片和base64互转 https://github.com/xfumihiro/react-native-image-to-base64
进度条:react-native-progress
自定义下拉刷新样式(ListView):react-native-pull
Toast组件 react-native-easy-toast
毛玻璃效果(图片模糊) react-native-blur
Input被键盘遮挡:react-native-input-scroll-view、react-native-keyboard-aware-scroll-view
下拉放大
react-native-parallax-view
react-native-parallax-scroll-view(这个貌似只有IOS有效?)
分享:react-native-share
底部确认卡 react-native-actionsheet
底部滚轮选择器 https://github.com/beefe/react-native-picker
侧滑出现按钮 react-native-swipeout
全屏正在加载组件 react-native-whc-loading
加载动画 react-native-spinkit
图表 react-native-charts-wrapper
顶部消息 react-native-message-bar
日历组件 react-native-myCalendar 、 react-native-calendars
聊天组件 react-native-gifted-chat
抛物线组件 react-native-parabolic
视频播放 react-native-video
扫描二维码
react-native-barcode-scanner-universal 安卓/IOS
react-native-barcodescanner 安卓
react-native-camera IOS
星星评分 https://github.com/djchie/react-native-star-rating(elements框架里有了)
加密 https://www.npmjs.com/package/crypto-js
Text跑马灯效果 https://github.com/remobile/react-native-marquee-label
侧栏 react-native-side-menu
线性渐变 react-native-linear-gradient
倒计时组件 react-native-CountDowntimer
照片墙 react-native-gallery
A-Z分组列表 react-native-alphabetlistview
文本超链接组件 react-native-hyperlink
https://github.com/beefe/react-native-textinput
● WebView https://github.com/alinz/react-native-webview-bridge
● https://github.com/yamill/react-native-orientation
● PDF https://github.com/cnjon/react-native-pdf-view
● https://github.com/rebeccahughes/react-native-device-info
● https://github.com/kiddkai/react-native-gestures
● - - https://github.com/FaridSafi/react-native-gifted-listview https://github.com/jsdf/react-native-refreshable-listview https://github.com/greatbsky/react-native-pull/wiki
● https://github.com/alinz/react-native-dropdown
● https://github.com/oblador/react-native-lightbox
● https://github.com/marcshilling/react-native-image-picker
● https://github.com/oblador/react-native-image-progress
●
https://github.com/race604/react-native-viewpager https://github.com/FuYaoDe/react-native-app-intro https://github.com/appintheair/react-native-looped-carousel https://github.com/leecade/react-native-swiper
● https://github.com/maxs15/react-native-modalbox https://github.com/brentvatne/react-native-modal https://github.com/bodyflex/react-native-simple-modal
● https://github.com/react-native-fellowship/react-native-blur
● https://github.com/oblador/react-native-vector-icons
● https://github.com/skv-headless/react-native-scrollable-tab-view
● https://github.com/exponentjs/react-native-tab-navigator
● material https://github.com/xinthink/react-native-material-kit
● base http://nativebase.io/docs/v0.4.6/components#anatomy https://github.com/GeekyAnts/NativeBase
● https://github.com/mastermoo/react-native-action-button https://github.com/ide/react-native-button
● https://github.com/gcanti/tcomb-form-native https://github.com/FaridSafi/react-native-gifted-form https://github.com/bartonhammond/snowflake
● TextInput https://github.com/halilb/react-native-textinput-effects
● https://github.com/FaridSafi/react-native-gifted-chat
● https://github.com/lelandrichardson/react-native-maps
● https://github.com/oblador/react-native-animatable
● https://github.com/maxs15/react-native-spinkit
●
https://github.com/root-two/react-native-drawer https://github.com/react-native-fellowship/react-native-side-menu
● https://github.com/dancormier/react-native-swipeout https://github.com/jemise111/react-native-swipe-list-view
● https://github.com/tomauty/react-native-chart
● https://github.com/lelandrichardson/react-native-parallax-view
● https://github.com/cqm1994617/react-native-myCalendar
● https://github.com/joshswan/react-native-globalize
● ListView https://github.com/hinet/react-native-checkboxlist
● https://github.com/sconxu/react-native-checkbox
● https://github.com/ideacreation/react-native-barcodescanner
● https://github.com/frostney/react-native-create-library
● https://github.com/MisterAlex95/react-native-record-sound
● https://github.com/bosung90/react-native-audio-android
● Bar https://github.com/KBLNY/react-native-message-bar
● iOS TableView https://github.com/aksonov/react-native-tableview
●
https://github.com/jeanregisser/react-native-popover https://github.com/instea/react-native-popup-menu
● 3D Touch https://github.com/madriska/react-native-quick-actions
● ActionSheet https://github.com/beefe/react-native-actionsheet
● https://github.com/ldn0x7dc/react-native-gallery
● https://github.com/reactnativecn/react-native-inputscrollview https://github.com/wix/react-native-keyboard-aware-scrollview
● https://github.com/sunnylqm/react-native-storage
● https://github.com/djchie/react-native-star-rating
● https://github.com/joshswan/react-native-globalize
● https://github.com/lazaronixon/react-native-qrcode-reader