本文推荐 11 个非常棒的 React Native 开源组件，希望能给移动应用开发者提供帮助。
React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架，已经用于 Facebook 的生产环境。React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP。
1. iOS 表单处理控件 tcomb-form-native
tcomb-form-native 是 React Native 强大的表单处理控件，支持 JSON 模式，可插拔的外观和感觉。在线演示：http://react.rocks/example/tcomb-form-native。
2. 摄像机视图 react-native-camera
react-native-camera 是 React Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。
使用示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
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>
<TouchableHighlightonPress={
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> 标签控件。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//Withinyourrenderfunction,assumingyouhaveafilecalled
//"background.mp4"inyourproject
<Videosource={
"background"
}style={styles.backgroundVideo}repeat={
true
}/>
//Lateroninyourstyles..
var
styles=Stylesheet.create({
backgroundVideo:{
resizeMode:
'cover'
,
//stretchandcontainalsosupported
position:
'absolute'
,
top:0,
left:0,
bottom:0,
right:0,
},
});
|
4. 导航控件 react-native-navbar
react-native-navbar 是用于 React Native 上简单的定制化导航栏。
示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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
(<Viewstyle={styles.navigator}>
{navBar}<Componentnavigator={navigator}route={route}/>
</View>
);
},render:
function
(){
return
(<Navigator
style={styles.navigator}
renderScene={
this
.renderScene}
initialRoute={{
component:InitialView,
navigationBar:<NavigationBartitle=
"InitialView"
/>
}}
/>
);
}
});
|
5. React Native 轮播控件 react-native-carousel
react-native-carousel 是一个简单的 React Native 轮播控件。
示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
var
Carousel=require(
'react-native-carousel'
);
var
ExampleProject=React.createClass({
render(){
return
(
<Carouselwidth={375}indicatorColor=
"#ffffff"
inactiveIndicatorColor=
"#999999"
>
<MyFirstPage/>
<MySecondPage/>
<MyThirdPage/>
</Carousel>
);
}
});
|
6. 下拉刷新组件 react-native-refreshable-listview
react-native-refreshable-listview 是下拉刷新 ListView，当数据重载的时候显示加载提示。
7. Modal 组件 react-native-modal
react-native-modal 是 React Native 的 <Modal> 组件。
8. 文本解析控件 react-native-htmltext
react-native-htmltext 可以用 HTML 像 markup 一样在 ReactNative 里创建出相应效果的样式文本。ReactNative 为那些样式文本提供一个文本元素，用于取代 NSAttributedString，你可以创建嵌套的文本：
|
1
2
3
4
|
<Textstyle={{fontWeight:
'bold'
}}>
Iambold
<Textstyle={{color:
'red'
}}>andred</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 的双向循环播放控件。
示例代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
'usestrict'
;
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
(<Carouseldelay={500}>
<Viewstyle={{backgroundColor:
'#BADA55'
,width:width,height:height}}/>
<Viewstyle={{backgroundColor:
'red'
,height:height}}/>
<Viewstyle={{backgroundColor:
'blue'
,height:height}}/>
</Carousel>
);
}
});
AppRegistry.registerComponent(
'carouselTest'
,()=>carouselTest);
|
