React Native
文章平均质量分 79
jjhappyforever.
财务自由.
展开
-
React Native UI布局总结
1.在React Native(RN)中提供了只有两种布局,分别是:absolute和relative。 如果你之前是搞安卓开发的会觉得RN设计非常怪异,在我们安卓原生开发中,决定用什么布局的是由parent决定的,如:AbsoluteLayout和RelativeLayout,而在RN开发中,决定用什么布局的是有child来决定的。比如: 这样Text组件相对于外层parent组件是相对原创 2016-07-10 02:40:19 · 13555 阅读 · 4 评论 -
React Native动画之Animated仿网易云音乐启动动画
动画对于一款APP的重要性,我想不用多说,想必不是搞开发的也明白,虽说APP的简洁实用性很重要,但UE也是同等重要的。 下面分析下网易云音乐的启动动画,一张开启图片缩放的同时首页也进行缩放,不过首页初始化的scale可能是1.5,总是初始化放大,然后缩放至正常状态,造成一种视觉冲击的效果,如果无法感受到的话,还是下载一枚用用。其实这种效果如果用原生开发的话,很简单,Activity之原创 2016-08-09 23:52:36 · 4652 阅读 · 0 评论 -
React Native集成Redux框架讲解与应用
如果你原本是搞移动原生开发的小伙伴,或许会有种疑问,Redux是个什么玩意,怎么刚刚学React Native(RN),又冒出来一个Redux框架,矣,暂先别疑问,当你学了以后,大多都有想放弃的心情,但当你掌握了以后,觉得一切又相当的美好,这里我就简单把我学习的心得给大家分享下,如果说的有误,还请大家口下留情。 学过React Native的都知道,RN的UI是根据相应组件的sta原创 2016-08-08 09:52:07 · 6847 阅读 · 3 评论 -
Android之原生项目集成React Native
上节我们简单讲解在一个用React Native(RN)创建的项目中如果引用安卓原生的控件,这节简单介绍下,在一个已存在的安卓原生应用中如何集成开发RN,如今的产品几乎都是原生所写,今后的开发方向肯定大多会去集成RN或者别的框架而并非推到重来,所以这块的内容也是开发必须要掌握的知识。原创 2016-07-22 00:15:08 · 8357 阅读 · 2 评论 -
React Native之仿今日头条首页
今日头条应用想必大家应该都不陌生,绝对称得上今日之星。媒体上面已经所向披靡,PK掉微信公众号是迟早的事情,我祝今日头条再创辉煌! 首先我们先看下今日头条的首页: 这里提到一个开源框架:react-native-scrollable-tab-view,类似于安卓中的ViewPagerIndicator+ViewPager等,下面我简单介绍下如何应用以及如何原创 2016-07-31 18:15:12 · 7790 阅读 · 0 评论 -
Rreact Native 常见错误总结
Rreact Native 常见错误总结原创 2016-07-25 12:25:24 · 24188 阅读 · 4 评论 -
React Native之调用安卓原生控件
在使用React Native(RN) 开发时,由于RN技术比较新,框架与控件相对较少,这时很自然就想到的RN如何调用Native以及如何进行通讯,个人感觉这块是开发必须要掌握的,今后的开发模式肯定是Hybird模式,由于初学,所以先按照文档流程跑通,至于原理后期再研究。 为了避免发生一些异常,这里友情提示下:将gradle升级成最新版本,不然在你整合的时候有可能会报:Module 0原创 2016-07-20 15:21:59 · 5321 阅读 · 0 评论 -
React Native之DrawerLayoutAndroid仿网易云音乐滑动菜单
针对滑动菜单,android SDK为我们提供了有 DrawerLayout,在React Native(RN)中对应的组件有DrawerLayoutAndroid.下面简单讲解下该组件的使用. 首先我们看下要实现的UI. 示例代码: <DrawerLayoutAndroid ref='drawer' drawer原创 2016-07-08 16:25:52 · 4114 阅读 · 1 评论 -
React Native之ListView的讲解与应用
在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢,这里简单的讲解下。 ListView.js源码截图: 从源码中可知RN中的ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性。原创 2016-07-18 14:03:29 · 9121 阅读 · 1 评论 -
React Native之Modal实现自定义Dialog
针对普通的弹框,React Native(RN)给我们提供了有Alert,但使用局限性很大,没有办法自定义,要实现自定义的弹框,我们应该如何来实现呢,这里提供两种方法:第一就是native本地来实现,然后暴露给RN来条用,第二就是使用组件Modal来实现,第一种方法这里就不写了,这里讲解下用Modal如何来实现。 首先我们先来了解下Modal是什么。 Modal组件可以原创 2016-07-28 12:24:20 · 11665 阅读 · 2 评论 -
React Native之广告栏Banner实现
Banner广告栏效果在应用中相当的普遍,比如网易,搜狐等新闻客户端以及天猫,京东之类的商城,在Android原生开发中一般会用ViewPager.实现起来也相对容易,在这里我简单介绍下用React Native(RN)如何来实现这种效果.原创 2016-07-05 14:31:05 · 6141 阅读 · 2 评论 -
React Native之ViewPagerAndroid讲解与应用
做过移动开发的朋友都知道,ViewPager控件在应用场景是在常见不过了,React Native(RN)给我们提供了一套针对安卓平台的component:ViewPagerAndroid。不过github上面有人实现了跨平台的ViewPager,只是体验上有点欠佳。这里乱侃一句,虽说FB打的旗号是:Learn once,write anywhere。但是觉得应该会慢慢的演变成write on原创 2016-07-25 10:53:18 · 5168 阅读 · 1 评论 -
React Native自定义BadgeView组件
学习React Native 有段时间了,这里就简单的自定义一个Component. 首先确定该Component有哪些属性,然后制定相应的propTypes.ReactPropTypes源码:var ReactPropTypes = { array: createPrimitiveTypeChecker('array'), bool: createPrimitive原创 2016-07-22 17:48:27 · 4022 阅读 · 0 评论 -
React Native之Android Tabbar的实现.
React是Facebook开源出来的一套前段框架,据目测是目前最热门的一套框架,随之而来是(RN)React Native,这套框架的意义重大,颠覆的不仅仅是开发者,连整个应用市场都会受到影响的,所以身为移动的开发者,快速学习起来吧,跟随市场的前沿,今后我会不断的更新RN文章. 接下来讲解的是Android中如何实现TabBar,都知道RN中针对IOS有TabBarIOS组件而针原创 2016-07-04 04:34:30 · 11164 阅读 · 4 评论 -
React Native之PanResponder讲解与应用
在原生的开发中,如果要自定义一些控件,可能会用到touch的相关方法,而React Native也有一套touch机制,说白了就是用JS写了一套方法打通android和ios平台,这里简单讲解下React Native(RN)的touch机制,这里先不过多深入研究,先熟悉下流程,至于RN的touch分发机制之后再详细讲解. PanResponder:可以将多点触摸操作协调成一个手势原创 2016-08-11 14:53:38 · 15152 阅读 · 1 评论