React Native 开源组件
来源:互联网 发布:怪物猎人捏脸数据 编辑:程序博客网 时间:2024/05/17 01:10
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。这个模块应用于开发的早期阶段,它支持摄像头的转换和基本图片捕捉。
使用示例:
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) {
nbsp; 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,当数据重载的时候显示加载提示。
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>
);
}
});
转载自:http://www.oschina.net/news/61214/11-react-native-ui-components
- React Native 开源组件
- react-native开源组件react-native-wechat学习
- [原]东方耀react-native 46-开源组件react-native-camera
- React Native开源播放器Video组件(react-native-video)
- 推荐 11 款 React Native 开源移动 UI 组件
- React Native开源图片缩放处理组件
- React Native开源时间日期选择器组件
- React Native开源广告轮播组件
- RN开源组件react-native-video的用法
- 11 款 React Native 开源移动 UI 组件
- 推荐 11 款 React Native 开源移动 UI 组件
- RN开源播放器Video组件(react-native-video)
- React Native 组件生命周期
- react-native 自定义组件
- React native Image组件
- react native 组件生命周期
- react-native 组件demo
- react-native组件笔记
- web服务器与文件服务器分离之磁盘映射
- Jquery认识 和 jQuery教程
- 项目中关于内存管理的问题
- 杭州--4.6
- 设计模式入门
- React Native 开源组件
- 大话设计模式-观察者模式
- 字符串相关内容整理
- 第六周上机实践项目——项目2-带武器的游戏角色
- Android Preference类中xml里属性的用法和介绍
- JavaScript setTimeOut方法与setInterval方法使用
- 5种常见排序方法深度剖析
- view 坐标
- 扩展性和存储限制