React-Native入门指南(五)——UI组件
2015-06-29 13:10
661 查看
React-Native入门指南
github:https://github.com/vczero/react-native-lession
React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率。最近一个星期写的文章如下,链接是github page的,其实也可以在系列博客找到相应文章:
Lession1: Hello React-Native
Lession2: 认识代码结构
Lession3: css和布局
Lession4: 学会React-Native布局(一)
Lession5: 学会React-Native布局(二)
Lession6: UI组件
Lession7: JSX在React-Native中的应用
还有几篇会时刻更新:
Lession8: 自己动手写组件
Lession9: 模块化开发
Lession10: 搭建项目架构
Lession11: 源码分析
第5篇UI组件
一、目前React-Native支持的组件
在facebook React-native的官网可以看到目前支持的组件如下: https://facebook.github.io/react-native/docs/getting-started.html#content
二、如何正确运行UI组件Example
我们可以到react-native的github项目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下载react-native的代码库,将UIExplorer目录下的所有文件拷贝到你新建的项目中。其实UIExplorerApp.js就是整个项目的启动的文件。有两种方式可以启动项目: 1、第一种是修改jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; 2、第二种就是将UIExplorerApp.js里面的代码复制到index.ios.js中,此时,注意: AppRegistry.registerComponent('HelloWorld', () => UIExplorerApp); HelloWorld是你的项目名称,如果已经启动项目,需要确保这个名称一致。 项目启动后的界面如下,你就可改改UI组件看效果了。
三、活动指示器组件
其实,每个组件如何使用,可以到demo中去看代码。这里做简单的介绍.活动指示器组件可以做loading,下拉刷新等
四、日历组件
五、图片组件
六、列表组件
七、导航器组件
八、导航组件
九、开关组件
其余组件可以查看demo运行和学习,其实就是相当于html标签,具有某种功能,习惯就好。
相关文章推荐
- React-Native入门指南(四)——React-Native布局实战(一)
- React-Native入门指南(二)——代码结构
- React-Native入门指南(六)——JSX在React-Native中的应用
- React-Native入门指南——第4篇react-native布局实战(二)
- React-Native入门指南(一)——环境配置 & Hello World
- React使用jquery方式动态获取数据
- ReactiveCocoa学习
- 《React:引领未来的用户界面开发框架》简读
- ReactiveCocoa源码解析
- ReactJS学习笔记六:感想 - 为什么说Virtual DOM 是React的精髓所在
- ReactJS读书笔记五:DOM操作
- ReactiveCocoa入门教程——第二部分
- ReactiveCocoa入门教程:第一部分
- 201506251428_《react native——安装、》
- ReactiveCocoa入门(一)
- 201506251117_《react——所需知识、主要技术》
- reactor官方文档译文(1)Reactor简介
- ReactJS 傻瓜教程
- react设置innerHTML
- 【Facebook的UI开发框架React入门之八】Image的使用简介(iOS平台)-goodmao