React Native 开源组件

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。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。

使用示例：

varReact=require('react-native'); 

var{ 

AppRegistry,

StyleSheet,

Text,

View,

}=React; 

varCamera=require('react-native-camera');

varcameraApp=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> 标签控件。

示例：

//Withinyourrenderfunction,assumingyouhaveafilecalled 

//"background.mp4"inyourproject 

<Videosource={"background"}style={styles.backgroundVideo}repeat={true}/> 

//Lateroninyourstyles.. 

varstyles=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 上简单的定制化导航栏。

示例代码：

varNavigationBar=require('react-native-navbar'); 

varExampleProject=React.createClass({ 

renderScene:function(route,navigator){ 

varComponent=route.component; 

varnavBar=route.navigationBar; 

if(navBar){ 

nbsp;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 轮播控件。

示例代码：

varCarousel=require('react-native-carousel');varExampleProject=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，你可以创建嵌套的文本：

<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 的双向循环播放控件。

示例代码：

'usestrict';varReact=require('react-native');varCarousel=require('react-native-looped-carousel');varDimensions=require('Dimensions');var{width,height}=Dimensions.get('window');var{ 

AppRegistry,Text,

View 

}=React;varcarouselTest=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> 

); 

} 

}); 

转载自:http://www.oschina.net/news/61214/11-react-native-ui-components