1.

iOS 表单处理控件 tcomb-form-native

tcomb-form-native 是 React Native 强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。
在线演示：http://react.rocks/example/tcomb-form-native
AnimatedFlatList

ReactNative-Art-Progress
2.摄像机视图 react-native-camera
react-native-camera 是 React Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的
转换和基本图片捕捉。
使用示例：
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var Camera = require('react-native-camera');

var cameraApp = React.createClass({

render: function() {
return (
<View>
<TouchableHighlight onPress={this._switchCamera}>
<View>
<Camera
ref="cam"
aspect="Stretch"
orientation="PortraitUpsideDown"
style={{height: 200, width: 200}}
/>
</View>
</TouchableHighlight>
</View>
);
},
_switchCamera: function() {
this.refs.cam.switch();
}
});

AppRegistry.registerComponent('cameraApp', () => cameraApp);

3.react-native-video
react-native-video 是 <Video>标签控件。
示例：
// Within your render function, assuming you have a file called
// "background.mp4" in your project
<Video source={"background"} style={styles.backgroundVideo}
repeat={true} />
// Later on in your styles..
var styles = Stylesheet.create({
backgroundVideo: {
 resizeMode: 'cover', // stretch and contain also supported
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});

4.导航控件 react-native-navbar
react-native-navbar 是用于 React Native 上简单的定制化导航栏。
示例代码：
var NavigationBar = require('react-native-navbar');
var ExampleProject = React.createClass({
renderScene: function(route, navigator) {
var Component = route.component;
var navBar = route.navigationBar;
if (navBar) {
navBar = React.addons.cloneWithProps(navBar, {navigator: navigator,
route: route
});
} return (<View style={styles.navigator}>
{navBar}<Component navigator={navigator} route={route} />
</View>
);
}, render: function() {return (<Navigator
style={styles.navigator}
renderScene={this.renderScene}
initialRoute={{
component: InitialView,
navigationBar: <NavigationBar title="Initial View"/>
}}
/>
);
}
});

5.React Native 轮播控件 react-native-carousel

react-native-carousel 是一个简单的 React Native 轮播控件。
示例代码：
var Carousel = require('react-native-carousel');var ExampleProject =
React.createClass({
render() {
return (
 <Carousel width={375} indicatorColor="#ffffff"
inactiveIndicatorColor="#999999">
<MyFirstPage />
<MySecondPage />
<MyThirdPage />
</Carousel>
);
}
});

6.下拉刷新组件 react-native-refreshable-listview
react-native-refreshable-listview 是下拉刷新 ListView，当数据重载的时候显示加载提示。

react-native-ultimate-listview
7.Modal 组件 react-native-modal
react-native-modal 是 React Native 的 <Modal> 组件。
8.文本解析控件 react-native-htmltext
react-native-htmltext 可以用 HTML 像 markup 一样在 ReactNative 里创建出相应效果的样式文本。
ReactNative 为那些样式文本提供一个文本元素，用于取代 NSAttributedString，你可以创建嵌套的文本：
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}> and red </Text>
</Text

9.react-native-htmlview
react-native-htmlview 是一个将 HTML 目录作为本地视图的控件，其风格可以定制。
10.LinearGradient 组件 react-native-linear-gradient
react-native-linear-gradient 是一个 React Native 的 LinearGradient 组件。

11.双向循环播放 react-native-looped-carousel
react-native-looped-carousel 是基于 React Native 的双向循环播放控件。
示例代码：
'use strict';var React = require('react-native');var Carousel = require('react-
native-looped-carousel');var Dimensions = require('Dimensions');var {width,
height} = Dimensions.get('window');var {
AppRegistry,
StyleSheet, Text,
View
} = React;var carouselTest = React.createClass({ render: function() {
return ( <Carousel delay={500}>
<View
style={{backgroundColor:'#BADA55',width:width,height:height}}/>
<View style={{backgroundColor:'red',width:width,height:height}}/>
<View style={{backgroundColor:'blue',width:width,height:height}}/>
</Carousel>
);
}
});

AppRegistry.registerComponent('carouselTest', () => carouselTest);

如果你知道其他 React Native 插件，在评论与大家分享一下吧！
文

作者： IT 程序狮
链接：http://www.imooc.com/article/2223
来源：慕课网
进度条组件
https://github.com/oblador/react-native-progress
https://github.com/bgryszko/react-native-circular-progress
https://github.com/oblador/react-native-image-progress
https://github.com/Daemon1993/ReactNative-Art-Progress

流程组件
https://github.com/24ark/react-native-step-indicator

http://bbs.reactnative.cn/topic/3402/基于 react-native 搭建的 p2p 开源 app

一个基于 React-Native 的互联网金融 P2P 项目

https://github.com/seawind8888/lanmaolicai

react-native-parallax-scroll-view
https://github.com/jaysoo/react-native-parallax-scroll-view
https://github.com/siuying/react-native-htmltext
https://github.com/jsdf/react-native-htmlview

下拉框
npm i react-native-modal-dropdown –save
eact-native-dropdown-menu
选择城市
import ChinaRegionWheelPicker from 'rn-wheel-picker-china-region';
https://github.com/LiuC520/react-native-city-pick

用于 React Native 练习的新闻类 APP，接口来自都市频道。

https://github.com/ljunb/react-native-iCityAction

React Native 常用第三方组件汇总--史上最全

2016-10-25 11:28 6044 人阅读 评论(0) 收藏 举报
分类：
React Native（24） app（22） node（3）
版权声明：本文为博主原创文章，未经博主允许不得转载。

React Native 项目常用第三方组件汇总：

React-native-animatable 动画

react-native-carousel 轮播

react-native-countdown 倒计时

react-native-device-info 设备信息

react-native-fileupload 文件上传

react-native-icons 图标

react-native-image-picker 图片选择器
react-native-keychain iOS KeyChain 管理

react-native-picker 滚轮选择器

react-native-picker-Android Android 滚轮选择器

react-native-refreshable-listview 可刷新列表

react-native-scrollable-tab-view 可滚动标签

react-native-side-menu 侧栏
PoSideMenu

react-native-flip-side-menu

react-native-animatable

react-native-swiper 轮播

react-native-video 视频播放

react-native-viewpager 分页浏览

react-native-scrollable-tab-view 可滑动的底部或上部
导航栏框架

react-native-tab-navigator 底部或上部导航框架(不可滑动)
react-native-check-box CheckBox

react-native-splash-screen 启动白屏问题

react-native-simple-router 简易路由跳转框架

react-native-storage 持久化存储

react-native-sortable-listview 分类 ListView

react-native-htmlview 将 HTML 目录作为本

地视图的控件，其风格可以定制

react-native-easy-toast 一款简单易用的 Toast 组

件，支持 Android&iOS.

选项卡 https://github.com/exponentjs/react-
native-tab-navigator

material 组件库（各种漂亮的小组件）https://github.co
m/xinthink/react-native-material-kit
base 组件库（各种封装不错的小组件）http://nativebase.io
/docs/v0.4.6/components#anatomy
https://github.com/GeekyAnts/NativeBas
e

不错的按钮
https://github.com/mastermoo/react-
native-action-button
https://github.com/ide/react-native-
button

react-native-fan-button

react-native-slide-button
react-native-menu-button
react-native-slider-button

输入框表单验证
https://github.com/gcanti/tcomb-form-native
https://github.com/FaridSafi/react-native-
gifted-form
https://github.com/bartonhammond/snowflak
e

炫酷效果的 TextInput
https://github.com/halilb/react-native-
textinput-effects
https://github.com/zbtang/React-Native-
TextInputLayout

聊天
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/rea
ct-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/vczero/react-native-
calendar

语言转化和一些常用格式转换
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

通讯录
https://github.com/rt2zz/react-native-
contacts

加密
https://www.npmjs.com/package/crypto-js

缓存管理
https://github.com/reactnativecn/react-
native-http-cache

ListView 的优化
https://github.com/sghiassy/react-
native-sglistview

图片和 base64 互转
https://github.com/xfumihiro/react-
native-image-to-base64

安卓 iOS 白屏解决
https://github.com/mehcode/rn-splash-
screen

Text 跑马灯效果
https://github.com/remobile/react-
native-marquee-label

清除按钮的输入框
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/johanneslumpe/react
-native-gesture-recognizers

下拉-上拉-刷新
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/ivpusic/react-native-
image-crop-picker

图片加载进度条
https://github.com/oblador/react-native-
image-progress
react-native-progress-bar
react-native-progress-circular

react-native-loading-spinner-overlay
轮播视图
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/rea
ct-native-blur

头像库
https://github.com/oblador/react-native-
vector-icons

滑动选项卡
https://github.com/skv-headless/react-native-
scrollable-tab-view

A ScrollView-like component that:

Has a parallax header

Has an optional sticky header

Is composable with any component that expects a ScrollView

(e.g. ListView or InfiniteScrollView)

Can be nested within other views

Works on iOS and Android

react-native-parallax-scroll-view

工程目录下终端输入 npm i XXX save

另附链接：
https://github.com/jondot/awesome-react-
native

React Native 开源秒杀倒计时模块(react-native-

CountDowntimer)
react-native-highcharts 图表组件

react-native-pathjs-charts