react-native
文章平均质量分 93
阿飞正传的阿飞
刘飞写字的地方
展开
-
React_Native拆分bundle之patch拆包
为什么要拆包背景介绍随着RN的包越来越大,第一次载入RN包的时长越来越长,用户需要等待的时间也就越长,体验较差。另外多个团队开发的话,互相之间的依赖也是个大问题,出现编译不过的话,就会出现水桶效应,所有的团队都要等待这个有问题的团队,从而拉低了整体的效率。另外我一直希望,能够将React-Native的业务功能,做成类似小程序一样:即用即载入,随时可以更新。想想我们的app里面包含了多少个用户也许永原创 2017-04-06 16:28:48 · 1349 阅读 · 1 评论 -
React-Native优化之PureComponent
React15.3的发布中包含了PureComponent,这个类最重要的用法是为了优化React的性能,下面我们将看下它是如何优化的。Component VS PureComponent首先要看Component的生命周期: 当props或者state改变的时候,会执行shouldComponentUpdate方法来判断是否需要重新render组建,我们平时在做页面的性能优化的时候,往往也是通过原创 2017-07-27 19:03:10 · 5624 阅读 · 0 评论 -
react-native time定时器 防止内存泄露的注意点
time是react-native提供的一个定时器,在实际使用中,经常会有使用不对,造成内存泄露的情况。很多React Native应用发生致命错误(闪退)是与计时器有关。具体来说,是在某个组件被卸载(unmount)之后,计时器却仍然在运行。防止出问题的办法也很简单,在unmount的时候,增加卸载定时器的操作:componentDidMount() { this.timer = setT原创 2017-07-27 15:55:32 · 1718 阅读 · 0 评论 -
listView和FlatList的flexGrow默认值为1
今天遇到了适配的问题,有个列表,需要自适应高度,按理说默认应该就是自适应的,但是在实际中发现,其会和另外一个视图1:1 ,然后就发现只有设置其flexGrow: 0的时候,它才会自动适配高度,说明它的flexGrow默认值为1.看下具体的列子:import React, { Component } from 'react';import { AppRegistry, StyleSheet,原创 2017-07-26 19:33:05 · 1429 阅读 · 0 评论 -
panResponder详解及Demo
我们知道,react-native封装了一系列的组件例如<Touchable**>来提供触摸事件的反馈,另外Button、Text等组件也提供了简单的点击方法来给组件快速添加触摸事件。但是这些组件都是针对某个特定的效果,因其是定制的,所以可自定义、调整的部分就会很少,至多是效果有个选项。那么,如果我们希望做复杂的效果,改怎么办呢?答案是panResopner。先看下panResponder的说明:原创 2017-08-01 19:02:16 · 7429 阅读 · 1 评论 -
react-native基类设计
背景前段时间发现iOS手机上,很多页面的字体样式会随着系统配置字体的大小而变换,使得界面不太美观。而这个其实只要给一个参数就可以解决,但是整个app中用该组件的地方非常多,开发挨个替换的话,工作量很大,而且很容易出现遗漏。另外升级RN后,出现了Android手机上面的Text点击崩溃问题,底层的bug,前端需求的话,也是要花费相当精力而且容易遗漏。那么,对于类似的问题,有没有好的解决方案呢?解决思路原创 2017-05-20 11:28:49 · 2279 阅读 · 2 评论 -
RN 最容易crash的代码用法及应对措施(持续更新)
变量保护出现最多的就是在使用redux来做数据层,使用this.props的属性没有去查询时候为undefined,这种情况,基本是必crash比如下例://show user name<Text>{this.props.userInfo.name}</Text>如果userInfo为undefined的话,就会崩溃,错误如下: TypeError: Cannot read property原创 2017-04-17 11:14:43 · 2530 阅读 · 0 评论 -
Android上的RN不能展示尺寸大的图,怎么办?
背景最近遇到一个营销的需求,一个简单的界面,上面是一个计数器,下面是一张介绍图。所以下面直接用了Image标签来做。但是在测试中发现了一个问题,部分的Android手机上面展示不出来图片。使用Android studio检查了下log,发现了如下的错误: OpenGLRenderer: Bitmap too large to be uploaded into a texture (750x452原创 2017-05-18 17:50:23 · 1815 阅读 · 1 评论 -
《ES6入门》读书笔记之let和const命令
title: 《ES6入门》读书笔记之let命令 date: 2017-04-17 15:37:38 tags: - React-Native - 读书笔记categories: React-Native正在读阮一峰的《ECMAScript 6 入门》,本系列博客都是读书笔记。ES6 PlayGround在介绍具体的内容之前,想给大家介绍一个好玩的playgroud,尤其合原创 2017-04-17 15:50:45 · 610 阅读 · 0 评论 -
React Native性能优化
关于帧在讲述如何优化性能之前,我们要先了解一下性能的概念。对一个从未接触过相关概念的人来说,所谓的性能就是当你去使用App的时候很流畅,点击、跳转等交互效果反应很快,而且很顺滑。这是感性的角度,那么理性的角度或者数据的角度看待呢?这里要介绍一个概念: 帧率。我们知道,所谓的动画或者电影,其实归根结底就是在一秒内快速闪过多张不同的图片,如果快到一定的程度,肉眼会误以为里面的动画都是连贯的。在iOS等设原创 2017-10-26 09:58:11 · 1038 阅读 · 0 评论