韩国美女青草视频,鞠婧祎的小视频

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

2015.04.23

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

React Native 是近期 Facebook 基于 MIT 協(xié)議開源的原生移動應(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 強大的表單處理控件，支持 JSON 模式，可插拔的外觀和感覺。在線演示：http://react.rocks/example/tcomb-form-native。

2. 攝像機視圖 react-native-camera

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

使用示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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> 標簽控件。

示例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 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)航欄。

示例代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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 輪播控件。

示例代碼：

1

2

3

4

5

6

7

8

9

10

11

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，當數(shù)據(jù)重載的時候顯示加載提示。

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 為那些樣式文本提供一個文本元素，用于取代 NSAttributedString，你可以創(chuàng)建嵌套的文本：

1

2

3

4

<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. 雙向循環(huán)播放 react-native-looped-carousel

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

示例代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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