1:ActivityIndicator:圆形的loading提示符号. 2:Button:按钮 3:FlatList:高性能列表组件,支持下拉刷新. 4:Image:图片组件,能显示 网络图片.静态资源.临时的本地图片.以及本地磁盘上的图片(如相册)等. 5:ImageBackground:背景图组件. 6:Modal:嵌入RN的混合应用中,可以使用Modal组件,其视图会覆盖于原生视图之上,占据焦点. 7:Picker:选择器. 8:RefreshControl:用在ScrollView或Li…

一.Navigator 1.使用导航器可以在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据 指定的路由来渲染场景. 可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势,查看Navigator.SceneConfigs来获取默认 的动画和更多的场景配置选项 2.导航方法 getCurrentRoutes() :获取当前栈里的路由,也就是push进来,没有pop掉的那些 jumpBack…

一.Switch选择开关控件 1.该组件为Android/IOS通用的两种状态的开关组件 2.属性方法 (1)disabled bool:如果该值为true,用户就无法点击switch开关,默认为false (2)onValueChange function方法,当该组件的状态值发生变化的时候回调方法 (3)value bool 该开关的值,如果为true,呈打开状态,默认为false 二.Picked选择器控件 1.该控件渲染IOS和Android平台上面的原生选择器控件 2.属性方法(通用的…

一.ToolbarAndroid 1.该组件封装了Android平台中的ToolBar组件(只适用于Android平台).一个ToolBar组件可以显示一个Logo图标 以及一些导航图片(例如:菜单功能按钮),一个标题以及副标题还有一系列功能的列表.标题和副标题是上下位置. 所以logo图标和导航图标显示在左边,标题和副标题显示在中间,功能列表显示在右边.如果Toolbar只有一个子 节点,其会显示在标题和功能列表的中间. 尽管ToolBar支持使用远程图片,但仅限于开发模式(DEV)下使用.在…

一.ScrollView 该组件封装了Android平台的ScrollView(滚动组件),并且提供触摸事件"responder"系统功能.使用ScrollView的时候 确保有一个固定的高度,因为这个控件其实就是把很多不固定高度的子控件装入到固定的父容器中(通过滑动交互). 如果我们要给ScrollView进行设置高度的话,要么我们直接ScrollView进行设置高度(不建议).另一种方法就是给 ScrollView的父控件设置相关高度.使用第二种方法ScrollView中是不能加{…

/** * Created by DaGuo on 2016/4/7. */ 'use strict' import React,{ Component, View, Text, ListView, } from 'react-native'; class ListViewDemo extends Component { constructor (props){ super(props); let ds=new ListView.DataSource({rowHasChanged:(r1,r2)…

一.ViewPagerAndroid 1.一个允许在子视图之间左右翻页的容器.每一个ViewPagerAndroid的子容器会被视作一个单独的页,并且会被拉伸填满 ViewPagerAndroid.注意所有的子视图必须是纯View,而不能是自定义的复合容器.你可以给每个子视图设置样式属性 譬如padding或backgroundColor. 2.属性 initialPage number :初始选中的页的下标.可以使用setPage函数来翻页,并且用onPageSelected来监听页的变化.…

…

来自:http://www.devio.org/tags/#React%20Native…

在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与接着学习的动力. 项目部分展现 项目源码地址     项目简介 1. APP后端搭建: 使用NodeJs的koa框架完成APP后端的搭建; 使用mongodb完成数据存储,通过mongoose模块完成对mongodb数据的构建; 2. APP前端搭建: 使用RN组件式架构.JS类库实现快速开发 采用…

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

前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西. 项目地址 在这里,如果有好的意见欢迎提 issue或pr. 开始 我们先来看下,腾讯课堂视频播放详情页面是怎么样的? 咋一看界面感觉有点复杂,其实简化来说,这个界面可以看成tab组件+scroll组件.哲学上说,要抓好主要矛盾与次要矛盾,这个问题的主要矛盾是scroll组件实现,也就是最外层的R…

开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合写东西,所以就留到今天总结了.因为这段时间在工作中陆陆续续的接触到了一些RN开发的东西,还是需要总结一下的.今天只是个开篇,接下来还会有陆陆续续的关于RN开发的总结,今天主要是环境搭建.简单的组件封装.Props和State的介绍,稍后还会更新布局.动画等一些开发中常用的东西. 虽然RN没有Rele…

Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascript的严格模式. (3) Ubuntu14.14 React Native 环境搭建 开发环境配置: ubuntu下折腾ReactNative https://gist.github.com/platonish/f913e8a691ae811524f47bfb7710437b 亲测,可用,开始创建工…

网上看的博客,看着写的很好,想深入学RN的详细看下之后,再自己敲敲吧!有助于身体健康! 一个RN组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5语法有所变化,本文是根据ES6语法写的. 组件生命周期流程图 在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建的时候调用一次,它的返回值成为了this.props的初始值 在ES6语法中,属性的…

相关文章 React Native探索系列 前言 React Native有很多组件比如Image.ListView等等,想要合理的使用组件,首先要先了解组件的生命周期. 1.概述 无论你是开发Android还是iOS,对于组件的生命周期一定不陌生,这是开发的基础.同样的React Native的组件也有生命周期,当应用启动,React Native在内存中维护着一个虚拟DOM,组件的生命周期就是指组件初始化并挂载到虚拟DOM为起始,到组件从虚拟DOM卸载为终结.生命周期的方法就是组件在虚拟DO…

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

利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? 那就是通过setNativeProps,不使用state和props,直接修改RN自带的组件,比如:View,Image,Text...,并且可以做到不触发RN组件生命周期中的方法.…

https://facebook.github.io/react-native/docs/native-modules-android.html RN实际就是依附在原生平台上,把各种各样的RN组件展示出来.所以RN如果可以访问原生代码的话,可以实现更高的复用性,以及做一些RN做不到的事情,如多线程图片处理.访问数据库等. 代码复用:Toast案例 假设公司的安卓通用UI库中已经有一个toast了,我们就不需要再RN中再次实现一次,而是将这个UI库api包装成一个原生模块,给RN调用 原生模块就是…

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html RN可以很好地支持往一个原生的app上添加RN的组件.通过简单的步骤,我们可以添加RN基础的特征.组件等.后面以android为例. 关键思想(概要) 设置RN的依赖和结构目录 用JS开发RN组件 添加一个ReactRootView到android app上,这会作为RN组件的容器 开启RN服务器和运行原生app 检查RN组件是否正常工…

最近在阅读RN的文档,但有一点深感遗憾的是——官方对绝大多数RN组件没有用Gif图或者静态图的方式呈现给大家. 所以我通过百度查询,一个一个的查到了这些RN组件的UI表现图,下面呈现给大家   阅前必读 首先表示抱歉,我没有注明每幅图片的url来源,这是有原因的,因为当前有很多人的博客转载他人的博客却没有注明出处,如果我莽撞地写上我找到该图片的url地址,那么可能反而会损害原作者本人,如果您看到这篇文章中使用了您的图片,还请您通过评论或者私信告诉我,我将会将您的原创地址添加到图片之后.当然图片的…

一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5语法有所变化,本篇文章是根据ES6语法写的. 在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建时,调用一次,它的返回值成为了this.props的初始值. 而ES6语法中,属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明,所以…

一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参数来完成. RCTRootView还有一个appProperties属性,修改这个属性,JS端会调用相应的渲染方法. 我们使用RCTRootView将React Natvie视图封装到原生组件中.RCTRootView是一个UIView容器,承载着React Native应用.同时它也提供了一个联通…

动画是提高用户体验不可缺少的一个元素.恰如其分的动画可以让用户更明确的感知当前的操作是什么. 无疑在使用React Native开发应用的时候也需要动画.这就需要知道RN都给我们提供了那些动画,和每个动画可以处理的功能有哪些. 填坑材料Animated 动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默认支持动画.动画API会调用iOS或者Android的本地代码来完成这些组件的位移.大小等动画.这样各种动画在视觉上可以非常的流…

离上次写RN笔记有一段时间了,期间参与了一个新项目,只在最近的空余时间继续学习实践,因此进度比较缓慢,不过这并不代表没有新进展,其实这个小东西离上次发文时已经有了相当大的变化了,其中影响最大的变化就是引入了Redux,后面会系统介绍一下. 在开始主题之前,先补充一点上回说到的动画初探(像我这么靠谱严谨的攻城狮,必须精益求精,┗|｀O′|┛ 嗷~~),上回文说到,经过我们自己定义了余弦动画函数之后,动态设定state的4个参数,实现了比较流畅的加载动画,这里可能有朋友已经注意到了,我们非常频繁的调…

旅行喵,是一款帮助用户快乐旅行的APP. 第一版的首打功能是行程定制,和景点信息介绍.大家可以在上面做非常简单的偏好选择,通过我们的智能算法生成适合自己的旅行路线. 为什么要用RN呢? 首先,相对于其它可以方便热更新的开发方式,RN在性能.可扩展性.代码维护上,有一定的优势. 其次,在人力资源利用上,相对于Native开发,也有一定的优势.我们最开始的时候只有3个人参与开发.后面为了让更多人熟悉RN这个技术,陆陆续续加了4､5个人进来.当然熟悉RN后又抽出去做其它项目了.基本上,新加进来的人,只…

官方中文文档是这样描述的:   就给我们这几句话 就打发我们了. 按照上面的写法,根本不知道  - (void)calendarEventReminderReceived:(NSNotification *)notification 方法  什么时候去调用.   但是我们根据iOS知识,知道想要发送通知,肯定要先监听通知.   所以我们要保证RN组件 先监听事件通知,在去原生组件发送事件通知.   原生组件: EventEmitterManager.h #import <React/RCTBri…

1.搭建开发环境 英文文档:http://facebook.github.io/react-native/docs/getting-started.html 中文文档:https://reactnative.cn/docs/0.51/getting-started.html 所有的环境配置好后 react-native init myProject cd myProject react-native run-iosreact-native run-android 开启调试模式:command+D…

生命周期 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数 下面来详细介绍生命周期…

Props State 一切界面变化,都是state变化 state修改必须通过setState方法 this.state.like=true 这样复制无效 setState是一个merge合并的操作,只修改指定属性,不影响其他属性 setState是异步操作 样式 通过StyleSheet.create来管理样式 <Text style={styles.bigBlue}>just bigBlue</Text> <Text style={[styles.bigBlue, st…