[置顶] 【稀饭】react native 实战系列教程之热更新原理分析与实现

很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodePush和reactnative中文网的pushy。实话说,这两个我还没有体验过。一来是当初选择RN是因为它不但拥有接近原生的体验感还具有热更新特性,那么就想自己来实现一下热更新,研究一下它的原理;二来,...
阅读(18191) 评论(11)

[置顶] 【稀饭】react native 实战系列教程之数据存储

概述在开发一款APP,对于数据的存储是在正常不过了,在此之前,【稀饭】这个应用还没有用到存储数据的地方,为了学习研究React Native的数据存储,打算给应用增加【我的收藏】和【观看历史】这两个功能。接下来,我们来看看如何实现。关于React Native数据存储的解决方案关于RN如何存储数据,有两种方案。 - AsyncStorage - SQLite第一种是官网提供的一种数据存储方案,它...
阅读(3593) 评论(11)

[置顶] 【稀饭】react native 系列教程之已有项目接入React Native

概述本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。引入React Nativebuild.gradle配置compile 'com.facebook.react:react-native:+'react-native的res使用到了23sdk的资源,因此编译的sdk要求是23compileSdkVe...
阅读(3101) 评论(2)

[置顶] 【稀饭】react native 实战系列教程之自定义原生UI组件

上一节,讲了关于RN的自定义原生模块,本节是关于自定义原生UI组件,学习完本节,你将了解到原生UI组件的开发流程,以及js如何向native发送命令和native如何向js发送事件。原生UI组件之VideoView视频播放器开发React Native并没有给我们提供VideoView这个组件,那我们要播放视频的话,有两种方法:一种是借助WebView,一种就是使用原生的播放器。这里我们就介绍下,如...
阅读(3150) 评论(9)

[置顶] 【稀饭】react native 实战系列教程之自定义原生模块

影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据,本节就不作为详细内容来讲解了,详细的代码可以看下我的github,效果如下:在点击播放时,会跳转到播放界面,并且横屏显示,退出播放界面时,会恢复到竖屏状态。但是,react native并没有给我们提供设置横竖屏的API,因此,我们需要自己使用原生的代码来完成此功能。使用原生代码,我们可以为react native作什么呢? 一个是功...
阅读(2260) 评论(1)

[置顶] 【稀饭】react native 实战系列教程之Navigator实现页面跳转

主界面开发上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部‘首页’和‘我的’两个tabbar。在js/文件夹下,新建MainScene.js文件import React,{Component} from 'react'; import { View, Text, TouchableOpacity, Image, StyleShee...
阅读(1999) 评论(1)

[置顶] 【稀饭】react native 实战系列教程之完成首页

首页功能前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图可以看到,首页顶部一个标题栏,下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以及选项卡切换的内容。标题栏这里的标题栏,我们使用的是ToolbarAndroid,看名称我们就知道这个是android下特有的组件view,所以就立马想到,这个组件是ios、android不能通用的。因...
阅读(2172) 评论(3)

[置顶] 【稀饭】react native 实战系列教程之影片数据获取并解析

获取网络数据在上一节,我们已经通过模拟数据,并将UI展示出来。这节我们将获取网络数据。数据来源于网络,仅用于学习使用。fetch介绍fetch是react native的一个网络请求库,使用该库不用引入模块,可以直接使用。一个简单的请求如下:fetch('http://facebook.github.io/react-native/movies.json')发起请求之后,我们还需要对它的响应进行处理...
阅读(2454) 评论(4)

[置顶] 【稀饭】react native 实战系列教程之首页列表UI实现

首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来。设计(图丑,莫见怪~)主界面的设计如下首页的设计如下有人可能会觉得,为什么不把TitleBar抽出来放在主界面,而要单独放在每个页面里。因为,这个跟你把Navigator(页面导航器)放在什么地方有关系,现在先不说为什么,就这么认为...
阅读(1727) 评论(2)

[置顶] 【稀饭】react native 实战系列教程之项目初始化

项目前期准备工作本系列课程实战,默认是你已经安装好react native所需的一切环境配置,如果你还没配置好,请事先看下中文官网。这里提一下,如果你在安装Chocolatey过程中出错了,一般是权限问题,你需要以管理员的身份来启动cmd命令行,然后再执行安装即可。本系列课程的开发环境: 系统:win10 IDE:webstorm、sublime text 3、android studio 调试机:...
阅读(1081) 评论(0)

[置顶] 【稀饭】react native 实战系列教程之项目介绍

写之前当你在看该系列教程时,我想你应该和我一样起码是有些基础了。本人是Android原生开发的,业余时间学习了下react native。学习的初衷是:很多时候,移动开发要求既要会Android也要会IOS(最好),但是学习IOS的成本摆在那里,然后听说react native开发使用js语言做移动开发,包括Android和IOS,本着对新技术极度好奇之孜孜以求,我就打开react native中文...
阅读(1784) 评论(10)

[置顶] 记一次内存泄露优化过程

背景项目目前存在使用久了或者重复打开关闭某个页面,内存会一直飙升,居高不下,频繁发生GC。静置一段时间后,情况有所改善,但是问题依旧明显,如图1-1、1-2。 图1-1.操作时的内存使用情况 图1-2.静置时的内存使用情况如上图1-1,是通过Android Studio查看内存(灰色)和CPU(红色)使用情况,可以看出内存有发生抖动并且是处于比较高的状态,再者,从logcat可以看到一直发生GC...
阅读(6527) 评论(4)

[置顶] Jenkins构建Android项目持续集成之findbugs的使用

题外话这篇本来和之前的系列要一起出的,但是因为中间公司要发布一个版本,给耽搁了,今天工作做完了,又闲了下来。所以就又来继续jenkins构建Android项目持续集成系列的findbugs篇。Findbugs简介关于findbugs的介绍,可以自行百度下,这里贴下百度百科的介绍。findbugs是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题。这组缺陷模...
阅读(3947) 评论(5)

[置顶] Jenkins构建Android项目持续集成之单元测试及代码覆盖率

单元测试  在软件开发中一直在推崇TDD(测试驱动开发),但是一直不能被有效的执行或者并不是真正的测试驱动开发(先开发后写单元测试),因为我们懒!而Android开发又是大多应用层面的开发,很多都是和视图层紧密相连的,业务逻辑和view相绑定,这导致编写单元测试有相当大的困难,因此就我项目而言,只针对工具类、服务端API编写单元测试。关于Android Studio如何编写单元测试并运行,可以看之前...
阅读(6265) 评论(13)

[置顶] Jenkins构建Android项目持续集成之创建项目

新建项目前面,已经介绍了,系统相关配置,接下来就可以开始创建项目了。选择新建—>构建一个自由风格的软件项目,然后填写项目名称。项目如下:注意:项目名称不能包含有中文,否则在跑job的时候会出错,所以上图的项目名是错误的,在此修正。项目配置 源码管理 在Git->Repository URL,填入项目的git仓库地址,图上的地址是我的github地址.选择的是master分支,你也可以填写自己的...
阅读(4600) 评论(8)

[置顶] Jenkins构建Android项目持续集成之系统配置篇

用户设置jenkins有自有的用户数据库,为了安全考虑,可以启用用户注册,使用权限控制登录。 切记,授权策略要先选择“登录用户可以做任何事”,因为现在还没有任何用户,不能指定管理员,设置之后保存退出。 填写注册信息。然后使用刚才注册的用户登录,”系统管理—>Configure Global Security”到安全管理界面 将刚才的授权策略改为“安全矩阵”,在这个矩阵里,可...
阅读(3478) 评论(1)

[置顶] Jenkins构建Android项目持续集成之Jenkins的安装篇

工具准备1、jenkins.war   可以去官网下载(http://jenkins-ci.org/)最新版本,下载地址:http://mirrors.jenkins-ci.org/war/latest/jenkins.war,如果下载不了,我在csdn上传了一份http://download.csdn.net/detail/a631855639/9335755 2、插件下载   这里上传了我...
阅读(6783) 评论(4)

[置顶] Jenkins构建Android项目持续集成之简介篇

瞎扯  2014年毕业的,到现在出来工作一年半左右。在大学学的专业是网络工程,大三下学期跟着老师做了四五个月的web开发,后来自学了Android,选择它是因为自己的一个兴趣,所以后来工作顺理成章的找了Android开发的工作。到今年六月初的时候,第一次换了工作,来到新公司后,第一次接触到了项目持续集成的概念,并且在来到新公司开始的一两个月,老大让我去了解学习了下,这里我整理了下我所知道的关于Jen...
阅读(2768) 评论(3)

Android手机屏幕尺寸计算

WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); Display display = wm.getDefaultDisplay(); DisplayMetrics dm = new DisplayMetrics(); if (Build.VERSION.SDK_INT >= Bui...
阅读(81) 评论(0)

Android ReplacementSpan 文字对齐问题

项目中需要在TextView中高亮显示‘@人员的名称’,实现方法采用自定义ReplacementSpan,遇到高亮的文字与文本对齐问题。解决方案: ReplacementSpan的draw方法实现@Override public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x,...
阅读(175) 评论(0)

android retrofit End of input at line 1 column 1 path

背景在使用retrofit作为项目的网络请求库时,接口定义如下:@GET(ACT_GET_NEW_STAFF) Call reqGetNewStaff();@GET(ACT_GET_NEW_STAFF_MORE) Call<List> reqGetNewStaffMore(@Query("index")int index, @Query("size")int size...
阅读(1810) 评论(0)

使用原生自定义View,setState刷新界面后UI不能正常显示

背景项目整合react native时,将原生的一个九宫格图片显示,封装成了RN控件,并提供了一个source属性@ReactProp(name = "source")问题在js端使用该控件时,通过state初始化时给source赋值,然后,当添加图片是,通过setState刷新数据来刷新界面显示,理想状态下是,界面应该显示新增的图片,但是,当setState之后,控件上的图片就不显示了!!尝试着给...
阅读(1948) 评论(0)

react native gradle assembleRelease打包运行失败,没有生成bundle文件

之前执行gradlew assembleRelease时是正常的,不知道是否是因为改动了gradle版本还是因为升级了android studio,反正就是之后执行gradlew assembleRelease bundle文件都无法正常生成,在gradle task依赖树里也没有了bundleReleaseJsAndAssets解决方案1、 手动执行react native bundle命令在项目...
阅读(1845) 评论(1)

is not a recognized Objective-C method

在使用swift写react native自定义module时,按官网简单的写了一个demo 方法// CalendarManager.swift@objc(CalendarManager) class CalendarManager: NSObject { @objc func say(name: String) -> Void { // Date is ready to use!...
阅读(589) 评论(0)

animated `useNativeDriver` is not supported because the native animated module is missing

今天一个react native android项目在适配ios时,点击按钮时会出现警告animated `useNativeDriver` is not supported because the native animated module is missing解决办法:在项目根目录命令行执行:react-native link react-native...
阅读(1039) 评论(0)

genymotion 5.0 arm translation

http://23pin.logdown.com/posts/294446-genymotion-use-arm-translation-on-5x-image如果网址打不开或者已经失效或者下载慢,直接下载该文件下载完成后,直接拖到模拟器,重启即可。如果发现模拟器不能拖拽文件,不要以管理员身份运行程序...
阅读(762) 评论(0)

the navigation stack will not be updated

新手,用swift写ios应用时,报了个错误popToViewController:transition: called on while an existing transition or presentation is occurring; the navigation stack will not be updat...
阅读(448) 评论(0)

unable to resolve module

背景这个问题是在react native android项目,在适配ios过程中,出现的一个错误。经过不断的调试,最后定位到问题出在项目引用cheerio模块。尝试解决出了这个问题,首先想到的是到react native github上去搜索issues。 https://github.com/facebook/react-native/issues/4968 这个issues就是搜索到的,关于...
阅读(1388) 评论(0)

genymotion在win10下无法启动

本来genymotion在win10下运行的还好好的,win10系统提示有更新,手贱点了更新,之后运行genymotion就启动不了了,然后又到官网下载最新的,安装完genymotion可以运行,但是模拟器却启动不起来,提示virtualbox有问题。然后我就手动找到virtualbox可执行文件,运行,提示要权限,授予了之后,就没反应了,就是看不到virtualbox界面,崩溃。。。。今天试着去v...
阅读(435) 评论(0)

关于RN listview item ref

背景在使用React Native的过程中,使用ListView渲染一个列表时,有时候需要操作item中某个控件,比如调用该控件的某个方法,我们知道要调用方法之前需要获取到该控件的对象引用,那么我们就开始尝试获取控件的引用对象。项目中的实际场景是:有一个电影观看历史列表,列表的每一行有个复选框CheckBox,勾选这一行的复选框后支持删除操作,虽然每一行的单独操作可以实现勾选/取消功能,但是同时又要...
阅读(736) 评论(0)

关于RN组件的导出export和export default

一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用。组件导出的关键字是exprot default没有加default时,例如:export class Template{}当然,你可以在单个js文件里声明多个组件,例如Templates.jsexport class Template{} export class AnotherTemplate{}这样在其他文件引用时,需要使...
阅读(4001) 评论(0)
132条 共9页1 2 3 4 5 ... 下一页 尾页
    个人资料
    • 访问:535758次
    • 积分:4359
    • 等级:
    • 排名:第6897名
    • 原创:105篇
    • 转载:22篇
    • 译文:5篇
    • 评论:307条
    关于我
    博客专栏
    最新评论