Recommended 11 React Native Open Source Mobile UI components

Recommended 11 React Native Open Source Mobile UI components

Oschina posted 10 month ago, total 14 reviews

This article recommends 11 great React Native Open source components, which hopefully will help mobile app developers.

React Native is a recent Facebook native mobile application development framework based on the MIT protocol, which has been used in the Facebook production environment. React Native can use the most popular React.js library to develop IOS and Android native apps.

1. IOS Form Processing Controls Tcomb-form-native

Tcomb-form-native is the React native powerful form-processing control that supports JSON mode, pluggable look and feel. Online Demo: Http://react.rocks/example/tcomb-form-native.

2. Camera View React-native-camera

React-native-camera is react native's camera viewport. This module is used in the early stages of development, which supports camera conversion and basic image capture.

Examples of Use:

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 is a <Video> label control.

Example:

Within your render function, assuming you has a file called//"Background.mp4" in your Project<video source={"backg Round "} Style={styles.backgroundvideo} Repeat={true}/>//later on in your styles. var styles = Stylesheet.create ({backgroundvideo: {resizemode: ' cover ',//stretch and contain also supported Posi tion: ' absolute ', top:0, left:0, bottom:0, right:0,},});

4. Navigation Controls React-native-navbar

React-native-navbar is a simple custom navigation bar for react native.

Example code:

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 Carousel Control React-native-carousel

React-native-carousel is a simple react native carousel control.

Example code:

var Carousel = require (' React-native-carousel '), var exampleproject = React.createclass ({render () {return (         <carousel width={375} indicatorcolor= "#ffffff" inactiveindicatorcolor= "#999999" > <myfirstpage/>  <mysecondpage/> <mythirdpage/> </Carousel>); }});

6. Drop-down Refresh component React-native-refreshable-listview

React-native-refreshable-listview is the drop-down refresh ListView, which displays the load prompt when the data is overloaded.

7. Modal Component React-native-modal

React-native-modal is a <Modal> component of react native.

8. Text parsing control React-native-htmltext

React-native-htmltext can use HTML like markup to create style text for the corresponding effect in reactnative. Reactnative provides a text element for those style text that replaces nsattributedstring, and you can create nested text:

<text style={{fontweight: ' Bold '}}> I am bold <text style={{color: ' Red '}}> and red </text></text

9. React-native-htmlview

React-native-htmlview is a control that takes an HTML directory as a local view, and its style can be customized.

LinearGradient Components React-native-linear-gradient

React-native-linear-gradient is a lineargradient component of a react native.

11. Bidirectional Loop Playback React-native-looped-carousel

React-native-looped-carousel is a bidirectional loop playback control based on the react native.

Example code:

' 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);

If you know other React Native plugin, in the comments share with you!

Recommended 11 React Native Open Source Mobile UI components