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
react-native-tab-navigator 導航 https://github.com/happypancake/react-native-tab-navigator
react-navigation 導航 https://github.com/react-community/react-navigation
react-native-navigation 原生導航 https://github.com/wix/react-native-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
immutability-helper 更新局部數據 https://github.com/kolodny/immutability-helper
uuid 創建uuid https://github.com/eugenehp/react-native-uuid
bundle-visualizer 包分析工具 https://github.com/IjzerenHein/react-native-bundle-visualizer

常用插件修改說明

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,786評論 6贊 534
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,656評論 3贊 419
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 176,697評論 0贊 379
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,098評論 1贊 314
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,855評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,254評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,322評論 3贊 442
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,473評論 0贊 289
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,014評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,833評論 3贊 355
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,016評論 1贊 371
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,568評論 5贊 362
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,273評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,680評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,946評論 1贊 288
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,730評論 3贊 393
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,006評論 2贊 374

推薦閱讀更多精彩內容