文章轉(zhuǎn)載自：開源中國社區(qū) [http://www.oschina.net]
原文地址：
http://www.oschina.net/news/61214/11-react-native-ui-components

本文推薦 11 個(gè)非常棒的 React Native 開源組件，希望能給移動(dòng)應(yīng)用開發(fā)者提供幫助。

React Native 是近期 Facebook 基于 MIT 協(xié)議開源的原生移動(dòng)應(yīng)用開發(fā)框架，已經(jīng)用于 Facebook 的生產(chǎn)環(huán)境。React Native 可以使用最近非常流行的 React.js 庫來開發(fā) iOS 和 Android 原生 APP。

1.iOS 表單處理控件 tcomb-form-native

tcomb-form-native 是 React Native 強(qiáng)大的表單處理控件，支持 JSON 模式，可插拔的外觀和感覺。

在線演示：http://react.rocks/example/tcomb-form-native

2.攝像機(jī)視圖 react-native-camera

react-native-camera 是 React Native 的攝像頭 viewport。這個(gè)模塊應(yīng)用于開發(fā)的早期階段，它支持?jǐn)z像頭的轉(zhuǎn)換和基本圖片捕捉。

使用示例：

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>標(biāo)簽控件。

示例：

// 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.導(dǎo)航控件 react-native-navbar

react-native-navbar 是用于 React Native 上簡單的定制化導(dǎo)航欄。

示例代碼：

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 是一個(gè)簡單的 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，當(dāng)數(shù)據(jù)重載的時(shí)候顯示加載提示。

7.Modal 組件 react-native-modal

react-native-modal 是 React Native 的<Modal>組件。

8.文本解析控件 react-native-htmltext

react-native-htmltext 可以用 HTML 像 markup 一樣在 ReactNative 里創(chuàng)建出相應(yīng)效果的樣式文本。ReactNative 為那些樣式文本提供一個(gè)文本元素，用于取代 NSAttributedString，你可以創(chuàng)建嵌套的文本：

<Text style={{fontWeight: 'bold'}}>
  I am bold 
  <Text style={{color: 'red'}}> and red </Text>
</Text

9.react-native-htmlview

react-native-htmlview 是一個(gè)將 HTML 目錄作為本地視圖的控件，其風(fēng)格可以定制。

10.LinearGradient 組件 react-native-linear-gradient

react-native-linear-gradient 是一個(gè) React Native 的 LinearGradient 組件。

11.雙向循環(huán)播放 react-native-looped-carousel

react-native-looped-carousel 是基于 React Native 的雙向循環(huán)播放控件。

示例代碼：

'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 插件，在評論與大家分享一下吧！