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

標籤：

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

oschina 發佈於 10個月前，共有 14 條評論

本文推薦 11 個非常棒的 React Native 開源組件，希望能給行動裝置 App開發人員提供協助。

React Native 是近期 Facebook 基於 MIT 協議開源的原生行動裝置 App開發架構，已經用於 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 外掛程式，在評論與大家分享一下吧～

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