react-native常用插件总结

插件名称 插件功能 对应GitHub的插件地址
UI组件
vector-icons 矢量图标 https://github.com/oblador/react-native-vector-icons
circular-progress 环形进度条 https://github.com/bgryszko/react-native-circular-progress
popup-menu popup-menu https://github.com/instea/react-native-popup-menu
parallax-view 下拉放大 https://github.com/lelandrichardson/react-native-parallax-view
htmlview 网页 https://github.com/jsdf/react-native-htmlview
textinput-effects 输入框 https://github.com/halilb/react-native-textinput-effects
drawer 抽屉控件 https://github.com/root-two/react-native-drawer
tabs 页签 https://github.com/aksonov/react-native-tabs
scrollable-tab-view 滑动页签 https://github.com/skv-headless/react-native-scrollable-tab-view
tab-navigator 导航 https://github.com/happypancake/react-native-tab-navigator
navigation 导航 https://github.com/react-community/react-navigation
button 按钮 https://github.com/ide/react-native-button
action-button 动态按钮 https://github.com/mastermoo/react-native-action-button
segmented-control-tab 分段按钮 https://github.com/kirankalyan5/react-native-segmented-control-tab
simple-radio-button 单选按钮 https://github.com/moschan/react-native-simple-radio-button
check-box 多选框 https://github.com/crazycodeboy/react-native-check-box
highly-customizable-action-sheet action-sheet https://github.com/knightsj/react-naive-highly-customizable-action-sheet
lightbox lightbox https://github.com/oblador/react-native-lightbox
gifted-listview 列表 https://github.com/FaridSafi/react-native-gifted-listview
swipe-list-view 侧滑列表 https://github.com/jemise111/react-native-swipe-list-view
swipe-left 侧滑列表 https://github.com/yzsolo/react-native-swipe-left
slider 滑块 https://github.com/jeanregisser/react-native-slider
foldview 折叠控件 https://github.com/jmurzy/react-native-foldview
gifted-form 表单 https://github.com/FaridSafi/react-native-gifted-form
spinkit 加载动画 https://github.com/maxs15/react-native-spinkit
loader 加载动画 https://github.com/mohebifar/react-native-loader
orientation 横竖屏 https://github.com/yamill/react-native-orientation
carousel 轮番页 https://github.com/nick/react-native-carousel
swiper 轮播图 https://github.com/leecade/react-native-swiper
viewpager 分页控件 https://github.com/race604/react-native-viewpager
modalbox 模态对话框 https://github.com/maxs15/react-native-modalbox
root-modal 模态对话框 https://github.com/magicismight/react-native-root-modal
calendar 日历 https://github.com/christopherdro/react-native-calendar
calendars 日历 https://github.com/wix/react-native-calendars
calendar-strip 日期控件 https://github.com/BugiDev/react-native-calendar-strip
easy-toast 提示框 https://github.com/crazycodeboy/react-native-easy-toast
root-toast 提示框 https://github.com/magicismight/react-native-root-toast
starRating 星星评分组件 https://github.com/bluesky0109/react-native-starRating
splash-screen 启动页 https://github.com/crazycodeboy/react-native-splash-screen
verification 验证码 https://github.com/asyalas/react-native-verification
功能组件
share 分享控件 https://github.com/EstebanFuentealba/react-native-share
contacts 通讯录 https://github.com/rt2zz/react-native-contacts
communications 通信 https://github.com/anarchicknight/react-native-communications
qrcode 二维码生成控件 https://github.com/cssivision/react-native-qrcode
AC-QRCode 二维码生成控件 https://github.com/MarnoDev/AC-QRCode-RN
barcodescanner 二维码扫描 https://github.com/ideacreation/react-native-barcodescanner
qrcode-scanner-view 二维码扫描 https://github.com/MarnoDev/react-native-qrcode-scanner-view
picker 选择器 https://github.com/beefe/react-native-picker
wheel-picker 选择器 https://github.com/lesliesam/react-native-wheel-picker
image-picker 图片选择 https://github.com/react-community/react-native-image-picker
tree-select 树形图 https://github.com/suwu150/react-native-tree-select
speech-iflytek 讯飞语音识别 https://github.com/zphhhhh/react-native-speech-iflytek
amap3d 高德地图 https://github.com/qiuxiang/react-native-amap3d
baidumap-sdk 百度地图(含聚合点) https://github.com/qiuxiang/react-native-baidumap-sdk
图表
charts-wrapper 图表 https://github.com/wuxudong/react-native-charts-wrapper
pathjs-charts 图表 https://github.com/capitalone/react-native-pathjs-charts
echarts 图表 https://github.com/somonus/react-native-echarts
echarts 图表 https://github.com/remobile/react-native-echarts
echarts-zzs 图表 https://github.com/ZScholes18/rn-echarts-zzs
媒体
camera 照相机 https://github.com/lwansbrough/react-native-camera
speech-iflytek 语音识别 https://github.com/zphhhhh/react-native-speech-iflytek
speech-to-text-ios 语音识别(iOS) https://github.com/muhaos/react-native-speech-to-text-ios
xunfei-speechrecognizer 讯飞语音听写(iOS) https://github.com/zhoumeitong/react-native-xunfei-speechrecognizer
sound 音乐播放 https://github.com/zmxv/react-native-sound
audio 音频记录 https://github.com/jsierles/react-native-audio
文件操作
fs 文件读写 https://github.com/itinance/react-native-fs
storage 存储 https://github.com/sunnylqm/react-native-storage
simple-store 存储 https://github.com/jasonmerino/react-native-simple-store
aws3 上传图片到aws3 https://github.com/benjreinhart/react-native-aws3
其他
keyboard-spacer 避免键盘遮挡 https://github.com/Andr3wHur5t/react-native-keyboard-spacer
webview-bridge WebView Javascript Bridge https://github.com/alinz/react-native-webview-bridge
animatable 动画 https://github.com/oblador/react-native-animatable
svg 矢量图 https://github.com/react-native-community/react-native-svg
fetch-polyfill 网络请求超时处理 https://github.com/robinpowered/react-native-fetch-polyfill
device-info 设备信息 https://github.com/rebeccahughes/react-native-device-info
cookies 获取cookies信息 https://github.com/joeferraro/react-native-cookies
websocket websocket https://github.com/pladaria/reconnecting-websocket

常用插件修改说明

1、react-native-root-toast

报错:null is not an object(evaluting '_this._root_setNativeProps')

修改 react-native-root-toast/lib/ToastContainer.js

componentWillUnmount = () => {
    Dimensions.removeEventListener('change', this._windowChanged);
    Keyboard.removeListener('keyboardDidChangeFrame', this._keyboardDidChangeFrame);
    -this._hide();
    +this._root&&this._hide();
};

2、react-naive-highly-customizable-action-sheet

报错:undefined is not an object (evaluating '_react.PropTypes.array')

修改 react-naive-highly-customizable-action-sheet/index.js

-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';

import {
     StyleSheet,
     View,
     TouchableOpacity,
     TouchableHighlight,
     TouchableWithoutFeedback,
+    ViewPropTypes,
     BackHandler
 } from 'react-native';

+import PropTypes from 'prop-types'

3、react-native-modalbox(^1.6.0)

问题:当使用coverScreen=true时,关闭modal页面上方出现闪屏

修改 react-native-modalbox/index.js

useNativeDriver: true => useNativeDriver: false

参考:https://github.com/maxs15/react-native-modalbox/issues/239

4、react-native-baidumap-sdk(^0.6.0)

问题:地图和其他页面切换时黑屏

修改react-native-baidumap-sdk/lib/android/src/main/java/cn/qiuxiang/react/baidumap/mapview/BaiduMapView.kt文件

val mapView = MapView(context)
改为
val mapView = TextureMapView(context)

参考:https://github.com/qiuxiang/react-native-baidumap-sdk/issues/60

推荐阅读更多精彩内容