react native出來一年多了，受到各大開發人員的喜愛，但是由于隻是專注于view層的開發，是以在很多深層次上還需要結合原生app做一定的相容，還有就是現在好多控件，如android中已是系統的控件的sidemenu、checkbox、gridview等，這些在react native中 系統是沒有給我們提供的，這時候就借助了第三方開源的力量。
那麼我們今天說說在react native項目開發中常見的一些第三方庫。
react-native-check-box checkbox
基本用法：
當然我們也可以自定義樣式，主要是對選中和未選中的樣式做修改：
react-native-flexi-radio-button
使用也很簡單，就是在中嵌套下就行：
react-native-side-menu
使用：
react-native-splash-screen
使用也很簡單，就是添加一個閃屏的xml
這個元件幫助我們選取圖檔和調用相機等，這個元件同時支援photo和video，也就是照片和視訊都可以用這個元件實作。
用法：
然後在頁面展示的時候：
說到這裡，我們要說一下另一個控件picker
picker就是reactnative界的spinner,其常用的屬性有：
onvaluechange 這個方法在方法在選擇picker某一項時調用 可傳兩個參數 選擇的value和position
selectedvalue 這個屬性是選擇的值
enabled 設定是否可點選 android屬性
mode 設定樣式 android屬性 dropdown下拉樣式和dialog彈窗樣式 預設是dialog
prompt 設定picker标題 android屬性 并且隻有是mode為dialog才會顯示
itemstyle 設定每一項的樣式 ios屬性
react-native-easy-toast
這個元件相容了android和ios的toast,使用也很簡單。
最後在需要調用的地方：
<a href="https://github.com/exponentjs/react-native-tab-navigator">頁籤</a>
<a href="https://github.com/xinthink/react-native-material-kit">各種漂亮的小元件</a>
<a href="https://github.com/mastermoo/react-native-action-button">按鈕</a>
輸入框表單驗證
<a href="https://github.com/gcanti/tcomb-form-native">https://github.com/gcanti/tcomb-form-native</a>
<a href="https://github.com/faridsafi/react-native-gifted-form">https://github.com/faridsafi/react-native-gifted-form</a>
<a href="https://github.com/bartonhammond/snowflake">https://github.com/bartonhammond/snowflake</a>
炫酷效果的 textinput
<a href="https://github.com/halilb/react-native-textinput-effects">https://github.com/halilb/react-native-textinput-effects</a>
<a href="https://github.com/zbtang/react-native-textinputlayout">https://github.com/zbtang/react-native-textinputlayout</a>
<a href="https://github.com/faridsafi/react-native-gifted-chat">聊天表情</a>
<a href="https://github.com/lelandrichardson/react-native-maps">地圖</a>
<a href="https://github.com/oblador/react-native-animatable">動畫</a>
<a href="https://github.com/maxs15/react-native-spinkit">加載動畫</a>
<a href="https://github.com/cqm1994617/react-native-mycalendar">月曆</a>
<a href="https://github.com/hinet/react-native-checkboxlist">可多選的listview</a>
<a href="https://github.com/aroth/react-native-uploader">react-native-uploader //檔案上傳</a>
react-native-picker-android android 滾輪選擇器
不錯的按鈕：
<a href="https://github.com/mastermoo/react-native-action-button">https://github.com/mastermoo/react-native-action-button</a>
<a href="https://github.com/ide/react-native-button">https://github.com/ide/react-native-button</a>
地圖
<a href="https://github.com/lelandrichardson/react-native-maps">https://github.com/lelandrichardson/react-native-maps</a>
動畫
<a href="https://github.com/oblador/react-native-animatable">https://github.com/oblador/react-native-animatable</a>
加載動畫
<a href="https://github.com/maxs15/react-native-spinkit">https://github.com/maxs15/react-native-spinkit</a>
抽屜效果
<a href="https://github.com/root-two/react-native-drawer">https://github.com/root-two/react-native-drawer</a>
<a href="https://github.com/react-native-fellowship/react-native-side-menu">https://github.com/react-native-fellowship/react-native-side-menu</a>
側滑按鈕
<a href="https://github.com/dancormier/react-native-swipeout">https://github.com/dancormier/react-native-swipeout</a>
<a href="https://github.com/jemise111/react-native-swipe-list-view">https://github.com/jemise111/react-native-swipe-list-view</a>
圖表
<a href="https://github.com/tomauty/react-native-chart">https://github.com/tomauty/react-native-chart</a>
下拉放大
<a href="https://github.com/lelandrichardson/react-native-parallax-view">https://github.com/lelandrichardson/react-native-parallax-view</a>
可滑動的月曆元件
<a href="https://github.com/cqm1994617/react-native-mycalendar">https://github.com/cqm1994617/react-native-mycalendar</a>
語言轉化和一些常用格式轉換
<a href="https://github.com/joshswan/react-native-globalize">https://github.com/joshswan/react-native-globalize</a>
單選多選listview
<a href="https://github.com/hinet/react-native-checkboxlist">https://github.com/hinet/react-native-checkboxlist</a>
選擇按鈕
<a href="https://github.com/sconxu/react-native-checkbox">https://github.com/sconxu/react-native-checkbox</a>
二維碼
<a href="https://github.com/ideacreation/react-native-barcodescanner">https://github.com/ideacreation/react-native-barcodescanner</a>
制作本地庫
<a href="https://github.com/frostney/react-native-create-library">https://github.com/frostney/react-native-create-library</a>
影音相關
<a href="https://github.com/misteralex95/react-native-record-sound">https://github.com/misteralex95/react-native-record-sound</a>
安卓錄音
<a href="https://github.com/bosung90/react-native-audio-android">https://github.com/bosung90/react-native-audio-android</a>
提示消息的bar
<a href="https://github.com/kblny/react-native-message-bar">https://github.com/kblny/react-native-message-bar</a>
ios原生tableview
<a href="https://github.com/aksonov/react-native-tableview">https://github.com/aksonov/react-native-tableview</a>
點選彈出視圖
<a href="https://github.com/jeanregisser/react-native-popover">https://github.com/jeanregisser/react-native-popover</a>
<a href="https://github.com/instea/react-native-popup-menu">https://github.com/instea/react-native-popup-menu</a>
3d touch
<a href="https://github.com/madriska/react-native-quick-actions">https://github.com/madriska/react-native-quick-actions</a>
雙平台相容的actionsheet
<a href="https://github.com/beefe/react-native-actionsheet">https://github.com/beefe/react-native-actionsheet</a>
照片牆
<a href="https://github.com/ldn0x7dc/react-native-gallery">https://github.com/ldn0x7dc/react-native-gallery</a>
鍵盤遮擋問題
<a href="https://github.com/reactnativecn/react-native-inputscrollview">https://github.com/reactnativecn/react-native-inputscrollview</a>
<a href="https://github.com/wix/react-native-keyboard-aware-scrollview">https://github.com/wix/react-native-keyboard-aware-scrollview</a>
本地存儲
<a href="https://github.com/sunnylqm/react-native-storage">https://github.com/sunnylqm/react-native-storage</a>
星星
<a href="https://github.com/djchie/react-native-star-rating">https://github.com/djchie/react-native-star-rating</a>
國際化
掃描二維碼
<a href="https://github.com/lazaronixon/react-native-qrcode-reader">https://github.com/lazaronixon/react-native-qrcode-reader</a>
通訊錄
<a href="https://github.com/rt2zz/react-native-contacts">https://github.com/rt2zz/react-native-contacts</a>
加密
<a href="https://www.npmjs.com/package/crypto-js">https://www.npmjs.com/package/crypto-js</a>
緩存管理
<a href="https://github.com/reactnativecn/react-native-http-cache">https://github.com/reactnativecn/react-native-http-cache</a>
listview的優化
<a href="https://github.com/sghiassy/react-native-sglistview">https://github.com/sghiassy/react-native-sglistview</a>
圖檔和base64互轉
<a href="https://github.com/xfumihiro/react-native-image-to-base64">https://github.com/xfumihiro/react-native-image-to-base64</a>
安卓 ios 白屏解決
<a href="https://github.com/mehcode/rn-splash-screen">https://github.com/mehcode/rn-splash-screen</a>
text跑馬燈效果
<a href="https://github.com/remobile/react-native-marquee-label">https://github.com/remobile/react-native-marquee-label</a>
清除按鈕的輸入框
<a href="https://github.com/beefe/react-native-textinput">https://github.com/beefe/react-native-textinput</a>
webview相關
<a href="https://github.com/alinz/react-native-webview-bridge">https://github.com/alinz/react-native-webview-bridge</a>
判斷橫豎屏
<a href="https://github.com/yamill/react-native-orientation">https://github.com/yamill/react-native-orientation</a>
<a href="https://github.com/cnjon/react-native-pdf-view">https://github.com/cnjon/react-native-pdf-view</a>
擷取裝置資訊
<a href="https://github.com/rebeccahughes/react-native-device-info">https://github.com/rebeccahughes/react-native-device-info</a>
手勢放大縮小移動
<a href="https://github.com/kiddkai/react-native-gestures">https://github.com/kiddkai/react-native-gestures</a>
<a href="https://github.com/johanneslumpe/react-native-gesture-recognizers">https://github.com/johanneslumpe/react-native-gesture-recognizers</a>
下拉-上拉-重新整理
<a href="https://github.com/faridsafi/react-native-gifted-listview">https://github.com/faridsafi/react-native-gifted-listview</a>
<a href="https://github.com/jsdf/react-native-refreshable-listview">https://github.com/jsdf/react-native-refreshable-listview</a>
<a href="https://github.com/greatbsky/react-native-pull/wiki">https://github.com/greatbsky/react-native-pull/wiki</a>
下拉選擇
<a href="https://github.com/alinz/react-native-dropdown">https://github.com/alinz/react-native-dropdown</a>
圖檔檢視
<a href="https://github.com/oblador/react-native-lightbox">https://github.com/oblador/react-native-lightbox</a>
照片選擇
<a href="https://github.com/marcshilling/react-native-image-picker">https://github.com/marcshilling/react-native-image-picker</a>
<a href="https://github.com/ivpusic/react-native-image-crop-picker">https://github.com/ivpusic/react-native-image-crop-picker</a>
圖檔加載進度條
<a href="https://github.com/oblador/react-native-image-progress">https://github.com/oblador/react-native-image-progress</a>
輪播視圖
<a href="https://github.com/race604/react-native-viewpager">https://github.com/race604/react-native-viewpager</a>
<a href="https://github.com/fuyaode/react-native-app-intro">https://github.com/fuyaode/react-native-app-intro</a>
<a href="https://github.com/appintheair/react-native-looped-carousel">https://github.com/appintheair/react-native-looped-carousel</a>
<a href="https://github.com/leecade/react-native-swiper">https://github.com/leecade/react-native-swiper</a>
模态視圖
<a href="https://github.com/maxs15/react-native-modalbox">https://github.com/maxs15/react-native-modalbox</a>
<a href="https://github.com/brentvatne/react-native-modal">https://github.com/brentvatne/react-native-modal</a>
<a href="https://github.com/bodyflex/react-native-simple-modal">https://github.com/bodyflex/react-native-simple-modal</a>
毛玻璃效果
<a href="https://github.com/react-native-fellowship/react-native-blur">https://github.com/react-native-fellowship/react-native-blur</a>
頭像庫
<a href="https://github.com/oblador/react-native-vector-icons">https://github.com/oblador/react-native-vector-icons</a>
滑動頁籤
<a href="https://github.com/skv-headless/react-native-scrollable-tab-view">https://github.com/skv-headless/react-native-scrollable-tab-view</a>