ReactNative技术篇
文章平均质量分 72
Mokin_Zhao
做一个纯粹的技术爱好者!
展开
-
React-native 布局
1 flex布局基本概念flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex Container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。如下图所示:容器默认存在两根轴:主轴(main axis)和交叉轴(cross a转载 2017-01-06 13:29:08 · 398 阅读 · 0 评论 -
React Native动画研究与优化
本次专题文章的题目为《ReactNative动画研究》,既然叫研究,那我们就争取一次将RN动画相关的内容都说清楚,提出问题-论证问题-解决问题的方式来研究。问题ReactNative动画支持的怎么样?ReactNative的动画使用起来方便吗?ReactNative动画的性能和H5性能相比怎么样?ReactNative动画的性能怎么优化?RN动画支持:转载 2017-02-09 15:27:24 · 3613 阅读 · 0 评论 -
React Native 痛点解析之性能调优
自从React Native出世,虽然官方一直尽可能的优化其性能,为了能让其媲美原生App的速度,但是现实感觉有点不尽人意。接下来介绍下实践中遇到的一些性能问题以及优化方案。以下对性能参数的依据是来自于React Native自带的FPS Monitor.1. Navigator页面切换动画优化场景:在Navigator还没出来时,导航器是由NavigatorIOS来实现的,当时觉转载 2017-02-09 15:35:56 · 3170 阅读 · 0 评论 -
ECMAScript 6 入门
ECMAScript 6 入门前言ECMAScript 6简介ECMAScript和JavaScript的关系ECMAScript的历史部署进度Babel转码器Traceur转码器ECMAScript 7let和const命令let命令块级作用域const命令全局对象的属性变量的解构赋值数组的解构赋值对象的解构赋值转载 2017-02-09 15:40:59 · 550 阅读 · 0 评论 -
学习React Native必看的几个开源项目
一.前言读项目源码是一种非常好的学习方式,现阶段React Native还在高速的发展,版本迭代速度很快,同时入门学习的教程也比较少。因此查看阅读别人写的好的开源项目就非常重要,吸取精华。那本期就来给我大家推荐几个开源项目刚创建的React Native交流6群: 426762904 ,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移转载 2016-12-30 15:18:56 · 361 阅读 · 0 评论 -
为React Native开发写的JS和React入门知识
来自Leo的原创博客,转载请著名出处我的stackoverflow前言想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS。毕业后一直在某五百强外企上班。做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Andr转载 2017-02-21 16:28:11 · 1128 阅读 · 0 评论 -
ReactNative之bundle文件瘦身(google-diff-match-patch)
【背景】目前,我们的app中采用Native+RN的混合模式开发,每个由RN开发的页面,页面的加载都是加载的一个Bundle文件,而一个Bundle文件的大小为500-600Kb。在没有内置bundle文件的情况下,用户想要使用所有由RN开发的功能,需要下载 n* 500 kb的文件。在有内置bundle文件的情况下,如果一个页面有更新,那么用户至少需要下载500kb的文件转载 2017-02-16 13:55:17 · 2657 阅读 · 0 评论 -
React Native 研发所有调试技巧
1、React Native Dev tool的安装在利用Chrome调试之前,首先需要在Chrome中安装React Native Dev tool工具。安装步骤如下:(1)点击Chrome右上角的按钮(2)点击设置按钮 (3)点击扩展程序(4)点击获取更多应用程序(5)在搜索框中输入React Native Dev t转载 2017-07-05 15:36:30 · 448 阅读 · 0 评论 -
ReactNative源码篇:源码初识
本篇系列文章主要分析ReactNative源码,分析ReactNative的启动流程、渲染原理、通信机制与线程模型等方面内容。1ReactNative源码篇:源码初识2ReactNative源码篇:代码调用3ReactNative源码篇:启动流程4ReactNative源码篇:渲染原理5ReactNative源码篇:线程模型6ReactNative源码篇:通信机制源码地址:ht转载 2017-12-11 16:27:02 · 377 阅读 · 0 评论 -
从一个实战项目来看一下React Native开发的几个关键技术点
一. 项目介绍这是我在学习贾鹏辉老师在慕课网上的一个很火的React Native实战的教程后,写出的课程Demo。该课程是慕课网里很火的一个React Native课程,当初在看了课程介绍和课程安排觉得讲解的点还是很全的,所以毫不犹豫地买了下来。从看视频,敲代码到重构,改bug,大概花了2个多星期的时间,除了调用友盟的SDK以及CodePush集成之外,其他的部分都基本完成了转载 2017-12-13 11:09:33 · 1977 阅读 · 0 评论 -
ReactNative50个demo源码
序号名称/地址简介预览图0react-native-eyepetizer模仿开眼3.1.21GitHubPopular这是一个用来查看GitHub最受欢迎与最热项目的App,它基于React Native支持Android和iOS双平台。3react-native转载 2017-12-07 23:26:17 · 801 阅读 · 0 评论 -
React Native 性能优化建议
1. 异步逐层渲染。React Native 虽然一直标榜媲美Native的体验,但实际使用下来,其渲染性还是非常低效,基于ScrollView和ListView两大容器,在渲染上,相当于web端的table布局,需要等整个大table渲染完成才显示页面,也就是说,当容器内有大量的子元素,其白屏时间会非常长。如何让React Native做到像web端边渲染边加载?可以采用异步渲染转载 2017-02-09 15:24:49 · 5264 阅读 · 0 评论 -
React Native 中 ScrollView 性能探究
1 基本使用ScrollView 是 React Native(后面简称:RN) 中最常见的组件之一。理解 ScrollView 的原理,有利于写出高性能的 RN 应用。ScrollView 的基本使用也非常简单,如下: ... 它和 View 组件一样,可以包含一个或者多个子组件。对子组件的布局可以是垂直或者水平的,通过属性 horizo转载 2017-02-09 15:23:29 · 2711 阅读 · 0 评论 -
react native 实战系列教程之热更新原理分析与实现
很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodePush和reactnative中文网的pushy。实话说,这两个我还没有体验过。一来是当初选择RN是因为它不但拥有接近原生的体验感还具有热更新特性,那么就想自己来实现一下热更新,研究一下它的原理;二来转载 2017-01-23 09:21:27 · 739 阅读 · 0 评论 -
React Native布局详细指南
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。 在React Native中布局采用的是FleBox(弹性框)进行布局。FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支转载 2017-01-15 15:28:50 · 574 阅读 · 0 评论 -
React Native控件之Text组件介绍
React Native控件之Text组件介绍(一)前言前面在讲解View视图的时候,我们使用过Text组件,这篇文章详细的来介绍一下Text组件。(二)基本用法Text组件是React中的一个基本组件,这个和iOS上的UILabel与Android上的TextView组件相类似,就是用来显示文本的,这个空间除了基本的显示布局之外,可以嵌套使用,设置样式,添加事件处转载 2017-01-15 15:30:09 · 626 阅读 · 0 评论 -
Android React Native加载图片资源的正确姿势
在这篇文章中Android React Native的使用细节问题提到了 图片使用的问题,也提到了无论用哪种方法都不能加载app内部的图片资源的问题,当时的代码是这样子的 source={ require('image!icon') } />11在官方文档中也是这么写的Image但是在另一个页文档中却与其相矛盾的,Images,估计这页文档刚加入不久也就转载 2017-01-15 15:31:11 · 1516 阅读 · 0 评论 -
React Native 之 TextInput使用
前言学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞转载 2017-01-22 16:17:13 · 412 阅读 · 0 评论 -
React Native bundle 打包、拆包工具之moles-packer
oles-packer 是由携程框架团队研发的,与携程moles框架配套使用的React Native 打包和拆包工具,同时支持原生的 React Native 项目。安装从npm仓库中安装npm install -g moles-packer获取帮助信息moles-packer --help使用在React Native项目根目录下执行命令mo转载 2016-12-30 14:51:31 · 2513 阅读 · 1 评论 -
【稀饭】react native 系列教程之已有项目接入React Native
概述本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。引入React Nativebuild.gradle配置compile 'com.facebook.react:react-native:+'11react-native的res使用到了23sdk的资源,因此编译转载 2016-12-30 14:52:52 · 1554 阅读 · 0 评论 -
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总:react-native-uploader //文件上传https://github.com/aroth/react-native-uploader0.gifjpush-react-native //官方版本https://github.com/jpush/jpush-react-nativereact-nati转载 2016-12-30 15:16:04 · 3460 阅读 · 0 评论 -
看漫画学 Redux
Flux 架构已然让人觉得有些迷惑,而比 Flux 更让人摸不着头脑的是 Flux 与 Redux 的区别。Redux 是一个基于 Flux 思想的新架构方式,本文将探讨它们的区别。如果你还没有看过这篇关于 Flux 的文章(译者注:也可以参考这篇),你应该先阅读一下。为什么要改变 Flux?Redux 解决的问题和 Flux 一样,但 Redux 能做的还有更多。转载 2017-01-05 11:22:41 · 442 阅读 · 0 评论 -
React-Native之Android:原生界面与React界面的相互调用
这里原生界面是指用布局文件实现或Java代码实现view的Activity,React界面是指用ReactJS实现的界面的Activity。从某种角度看,React只是充当了Android里的view层,因此原生界面与React界面的相互调用及数据传递同原生界面之间的互动基本是一致的。下面是我对两种界面的相互调用和数据传递的一种实现尝试,不一定是最有效率或最佳的,纯当练习和探索而已。转载 2017-01-15 15:28:11 · 1430 阅读 · 0 评论 -
在react-native中使用redux
redux是什么?redux是一个用于管理js应用状态的容器。redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等。redux设计的理念很简单,似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*的第三方中间件、插件越来越多。如果react项目中想使用re转载 2017-01-15 15:33:22 · 516 阅读 · 0 评论 -
React Native 语法指南
React Native真的是越来越流行,没使用React Native开发项目都不好意思说自己是搞客户端开发的。对于纯Native开发者来说,刚上手React Native有一定的适应期,如果JavaScript也不熟练的话那就更悲催了。React Native涉及ES6,React语法,JSX,前端调试,Native客户端等知识,本文简单总结了React Native开发中一些知识点。算是在学转载 2017-01-22 16:58:22 · 386 阅读 · 0 评论 -
一个React Native 项目架构设计
原创 2019-06-29 23:01:04 · 1098 阅读 · 0 评论