[RN库] 推荐React Native 开源移动 UI 组件

本文推荐 11 个非常棒的React Native开源组件，希望能给移动应用开发者提供帮助。

React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架，已经用于 Facebook 的生产环境。React Native 可以使用最近非常流行的React.js库来开发 iOS 和 Android 原生 APP。

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

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

摄像机视图 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 (

      

        

          

            

              ref="cam"

              aspect="Stretch"

              orientation="PortraitUpsideDown"

              style={{height: 200, width: 200}}

            />

          

        

      

    );

  },

  _switchCamera: function() {

    this.refs.cam.switch();

  }

});

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

react-native-video

react-native-video是

示例：

// Within your render function, assuming you have a file called

// "background.mp4" in your project

// 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,

  },

});

导航控件 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 (

        {navBar}

      

    );

  },  render: function() {return (

        style={styles.navigator}

        renderScene={this.renderScene}

        initialRoute={{

          component: InitialView,

          navigationBar: 

        }}

      />

    );

  }

});

React Native 轮播控件 react-native-carousel

react-native-carousel是一个简单的 React Native 轮播控件。

示例代码：

var Carousel = require('react-native-carousel');var ExampleProject = React.createClass({

  render() {    

   return (      

        

        

        

        

      

    );

  }

});

下拉刷新组件 react-native-refreshable-listview

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

Modal 组件 react-native-modal

react-native-modal是 React Native 的 组件。

文本解析控件 react-native-htmltext

react-native-htmltext可以用 HTML 像 markup 一样在 ReactNative 里创建出相应效果的样式文本。ReactNative 为那些样式文本提供一个文本元素，用于取代 NSAttributedString，你可以创建嵌套的文本：

  I am bold 

   and red 

react-native-htmlview

react-native-htmlview是一个将 HTML 目录作为本地视图的控件，其风格可以定制。

LinearGradient 组件 react-native-linear-gradient

react-native-linear-gradient是一个 React Native 的 LinearGradient 组件。

双向循环播放 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 (      

          

          

          

      

    );

  }

});

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

Teaset

React Native UI 组件库

https://github.com/rilyu/teaset/blob/master/docs/cn/README.md

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