几款简单的 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。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。

使用示例：


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. 导航控件 react-native-navbar

react-native-navbar 是用于 React Native 上简单的定制化导航栏。

示例代码：


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，当数据重载的时候显示加载提示。

7. Modal 组件 react-native-modal

react-native-modal 是 React Native 的 <Modal> 组件。

时间： 2024-12-13 05:32:38

几款简单的 React Native UI 组件的相关文章

react native 常用组件汇总

react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 https://github.com/jpush/jpush-react-native react-native-jpush 由 React Native 中文网开发维护. https://github.com/reactnativecn/react-native-jpush pouchdb-re

从零开发一款自己的小程序UI组件库（二）

写在前面:从零开发一款自己的小程序UI组件库(一) 上节我们讲到初始化组件库模板.模板文件概述.模板上传npm以及npm包文件下载至本地并运用到项目.这节我们继续,内容主要有基础UI组件库的搭建(button组件的实例)以及如何在本地使用npm link调试npm包项目. 本节所用到的物料:mineui-weapp组件库v1.1.weapp-for-mineui程序v1.1 1.开发基础组件button 我们上节有提到,要开发组件库的话,需要在官方单组件模板的基础上,①修改tools目录下的co

react native image组件不显示图片问题

---恢复内容开始--- 在用react native image组件的时候要设置好这个组件的高宽图片,还有最关键的是ios9以后苹果不支持http协议的图片,要在Info.plist文件下面新添 然后就OK了 ---恢复内容结束--- 原文地址:https://www.cnblogs.com/drizzle-wen/p/8179784.html

Android React Native自定义组件的流程

假设我们现在有这么一个需求,就是自定义一个组件,该组件由一个小图标和图标的文字说明组成,并且带有背景色,背景色可设置,宽度高度可设置.如下图所示正是两个这样的组件所组成. 首先,在index.android.js目录下新建一个js文件,命名为item.js,在里面输入模板代码 /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('

React Native 中组件的生命周期（转）

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

React Native 一个组件styles BUG

'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = React; var CIRCLE_SIZE = 40; var PanResponderExample = React.createClass({ componentWillMount: function() { this._panResponder = PanResponder.create({ o

10款响应式的 jQuery UI 组件的代码和模块

1.Hashslider – 带有 Hash 标签功能的 jQuery 内容滑块 Hashslider 实现了常见的 jQuery 滑块的功能,特别之处在于给 URL 加上了标签,因此你能够连接到滑块的某块内容.滑块的内容也可以从外部的 HTML 文件获取. 在线演示 源码下载 2.Smint – 用于单页网站制作的 jQuery 导航菜单插件 Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮

React Native创建组件的三种方式

创建组件的三种方式 1.ES6创建组件的方式 export default class HelloComponent extends Component{ render(){ return <Text style={{color: 'red'}}>Hello</Text> } } 2.ES5创建组件的方式 var HelloComponent = React.createClass({ render(){ return <Text style={{color: 'red'}}

react native 子组件向父组件传值

父组件: 引入子组件:import CheckBox from  '../checkbox'; 父子之间交互通信,接受子组件的值 fn(val){this.setState({roleType:val});} //调用通信 <CheckBox data={this.state.roleType} isRow={styles.isRow} fn={this.fn.bind(this)}/> 子组件: 其中fn里面传递的值为要传递给父组件的值 onPress={()=>{this.props