本文推薦 11 個非常棒的 React Native 開源元件，希望能給移動應用開發者提供幫助。

React Native 是近期 Facebook 基於 MIT 協議開源的原生移動應用開發框架，已經用於 Facebook 的生產環境。React Native 可以使用最近非常流行的 React.js 庫來開發 iOS 和 Android 原生 APP。

1. iOS 表單處理控制元件 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

示例：

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

示例程式碼：

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

示例程式碼：

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

7. 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

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

11. 雙向迴圈播放 react-native-looped-carousel

 示例程式碼：

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