推薦11 款 React Native 開源移動 UI 組件

本文推薦 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，當數據重載的時候顯示加載提示。

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