推荐 11 款 React Native 开源移动 UI 组件 - 开源中国社区
Float_left Icon_close
推荐 11 款 React Native 开源移动 UI 组件
oschina 2015年04月04日

推荐 11 款 React Native 开源移动 UI 组件

oschina oschina 发布于2015年04月04日 收藏 378 评论 15

阿里云高性能云服务器,2折起! >>> >>>  

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

使用示例:

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 Hacker News

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 插件,在评论与大家分享一下吧~

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:推荐 11 款 React Native 开源移动 UI 组件
分享
评论(15)
最新评论
0
厉害!!!
0
mark,厉害呀
0
先收藏
0
妹子UI有一整套 react 组建示例 http://amazeui.org/react/
0

引用来自“jQer”的评论

这些东西拼起来只会让你的程序变成垃圾堆
咱们能交流一下不,有些东西还是不懂啊
0
ios 已经很强了,但是官方blog 说Android 他们还需要6个月的开发周期,估计要年底才能放出。而且很多基础控件,很多第3方控件都只支持ios,跨平台暂时不能考虑,开发ios 节省了obj-c 程序员,js熟手稍微看一天就会。
0
表示关注
0
唯一的好处最终把这个 Tag 转换成 Native Code。。。功能上还不如 PhoneGap全面。

PhoneGap 在最新的手机上体验已经很好了。
0
这些东西拼起来只会让你的程序变成垃圾堆
0
赞啊
0
哪里有好教程
0
赞,可否分享它的实践教程。。。
0
mark
0
Good。。。
0
顶部