React Native
文章平均质量分 73
画虎烂
每天反思,每天进步
展开
-
react native不同组件间传递值
事件的订阅与发送:DeviceEventEmitter注册事件监听import { DeviceEventEmitter,} from 'react-native';class XiFan extends Component { componentDidMount(){ this.subscription = DeviceEventEmitter.addListener原创 2016-08-15 15:45:32 · 2205 阅读 · 0 评论 -
【稀饭】react native 实战系列教程之数据存储
概述在开发一款APP,对于数据的存储是在正常不过了,在此之前,【稀饭】这个应用还没有用到存储数据的地方,为了学习研究React Native的数据存储,打算给应用增加【我的收藏】和【观看历史】这两个功能。接下来,我们来看看如何实现。关于React Native数据存储的解决方案关于RN如何存储数据,有两种方案。 - AsyncStorage - SQLite第一种是官网提供的一种数据存储方案,它原创 2016-11-03 11:46:45 · 10006 阅读 · 11 评论 -
【稀饭】react native 系列教程之已有项目接入React Native
概述本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能有时候会觉得不是很流畅,特此说明。引入React Nativebuild.gradle配置compile 'com.facebook.react:react-native:+'react-native的res使用到了23sdk的资源,因此编译的sdk要求是23compileSdkVe原创 2016-10-11 16:36:53 · 7278 阅读 · 2 评论 -
关于state刷新界面的思考
我们知道当state更新时,界面会重新绘制,render会被执行,但是一个界面包含许多控件,state更新导致界面重绘,那么是否所有的控件都重绘呢?验证通过一个点击事件来改变state的值,然后看看界面有什么变化,代码如下:import React,{Component} from 'react';import { View, TouchableOpacity, Text,原创 2016-10-14 13:40:09 · 7290 阅读 · 0 评论 -
关于RN listview item ref
背景在使用React Native的过程中,使用ListView渲染一个列表时,有时候需要操作item中某个控件,比如调用该控件的某个方法,我们知道要调用方法之前需要获取到该控件的对象引用,那么我们就开始尝试获取控件的引用对象。项目中的实际场景是:有一个电影观看历史列表,列表的每一行有个复选框CheckBox,勾选这一行的复选框后支持删除操作,虽然每一行的单独操作可以实现勾选/取消功能,但是同时又要原创 2016-11-16 15:30:11 · 2425 阅读 · 0 评论 -
关于RN组件的导出export和export default
一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用。组件导出的关键字是exprot default没有加default时,例如:export class Template{}当然,你可以在单个js文件里声明多个组件,例如Templates.jsexport class Template{}export class AnotherTemplate{}这样在其他文件引用时,需要使原创 2016-11-14 10:43:57 · 12383 阅读 · 1 评论 -
unable to resolve module
背景这个问题是在react native android项目,在适配ios过程中,出现的一个错误。经过不断的调试,最后定位到问题出在项目引用cheerio模块。尝试解决出了这个问题,首先想到的是到react native github上去搜索issues。 https://github.com/facebook/react-native/issues/4968 这个issues就是搜索到的,关于原创 2016-12-14 10:27:16 · 9489 阅读 · 1 评论 -
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原创 2016-12-21 16:48:03 · 4200 阅读 · 0 评论 -
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!原创 2016-12-26 17:36:28 · 2767 阅读 · 0 评论 -
react native gradle assembleRelease打包运行失败,没有生成bundle文件
之前执行gradlew assembleRelease时是正常的,不知道是否是因为改动了gradle版本还是因为升级了android studio,反正就是之后执行gradlew assembleRelease bundle文件都无法正常生成,在gradle task依赖树里也没有了bundleReleaseJsAndAssets解决方案1、 手动执行react native bundle命令在项目原创 2017-01-10 15:19:59 · 9007 阅读 · 1 评论 -
【稀饭】react native 实战系列教程之热更新原理分析与实现
很多人在技术选型的时候,会选择RN是因为它具有热更新,而且这是它的一个特性,所以实现起来会相对比较简单,不像原生那样,原生的热更新是一个大工程。那就目前来看,RN的热更新方案已有的,有微软的CodePush和reactnative中文网的pushy。实话说,这两个我还没有体验过。一来是当初选择RN是因为它不但拥有接近原生的体验感还具有热更新特性,那么就想自己来实现一下热更新,研究一下它的原理;二来,原创 2017-01-11 18:57:11 · 21999 阅读 · 11 评论 -
could not get batchedbridge, make sure your bundle is packaged correctly
之前项目还能正常运行,可是今天再去运行时报could not get batchedbridge, make sure your bundle is packaged correctly原因:可能是你将之前安装并配置好的apk应用从手机卸载掉,然后重新安装运行,这时候的dev settings 被重置了。解决方案:重新配置好IP和端口号,再运行react-native run-android原创 2016-08-26 17:12:49 · 7444 阅读 · 0 评论 -
react native navigator关闭侧滑手势
我们在使用Navigator进行页面跳转的时候,会配置跳转动画configureScene,但是你会发现,我们使用侧滑手势的时候,页面会拉动,会导致或页面关闭或打开页面。如果我们不希望让它响应侧滑手势呢?解决如下:在使用Navigator时,配置configureScene的gestures为nullconfigureScene={(route) => { var conf = Navigato原创 2016-10-12 12:15:39 · 3906 阅读 · 2 评论 -
【稀饭】react native 实战系列教程之自定义原生模块
影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据,本节就不作为详细内容来讲解了,详细的代码可以看下我的github,效果如下:在点击播放时,会跳转到播放界面,并且横屏显示,退出播放界面时,会恢复到竖屏状态。但是,react native并没有给我们提供设置横竖屏的API,因此,我们需要自己使用原生的代码来完成此功能。使用原生代码,我们可以为react native作什么呢?一个是功原创 2016-09-22 16:20:16 · 3962 阅读 · 1 评论 -
React Native 自定义组件报错 has no propType for native prop
在使用自定义UI组件时,定义JS组件报如下错误has no propType for native prop.If you haven't changed this prop yourself,this usually means that your versions of the native code andr JavaScript code are out of sync. Updating原创 2016-09-21 14:47:18 · 6912 阅读 · 2 评论 -
react native 动态添加/渲染组件
将组件放入到一个数组里面,然后在渲染的时候,将数组作为参数。render(){ var pages =[]; for (var i = 0; i < playList.length; i++) { pages.push( <Text key={i}>{playList[i]}</Text> ); } return原创 2016-08-18 11:43:30 · 10775 阅读 · 3 评论 -
【稀饭】react native 实战系列教程之项目介绍
写之前当你在看该系列教程时,我想你应该和我一样起码是有些基础了。本人是Android原生开发的,业余时间学习了下react native。学习的初衷是:很多时候,移动开发要求既要会Android也要会IOS(最好),但是学习IOS的成本摆在那里,然后听说react native开发使用js语言做移动开发,包括Android和IOS,本着对新技术极度好奇之孜孜以求,我就打开react native中文原创 2016-08-24 16:24:50 · 2638 阅读 · 10 评论 -
React Native 之安装过程及遇到的问题
背景本文在写时,react native的版本是v0.32.0-rc.0,react native cli的版本是1.0.0。本人是学Android的,过来学学react native,所以jdk、sdk、Android studio什么的配置环境,都默认是已经安装配置好的了,如果这些你还没有安装的话,可以网上查查资料先装起来吧。安装文档手册官方英文文档:http://facebook.github原创 2016-08-08 18:37:36 · 3856 阅读 · 0 评论 -
react native组件传递参数值给方法
比如我们定义一个TouchableOpacity点击事件,该方法需要接收一个参数值,如下_onTabPress(index){ console.log('index = '+ index);}组件上绑定方法<TouchableOpacity onPress={this._onTabPress.bind(this,1)}/>bind的第一个参数是上下文对象,第二个参数开始是方法的参数值原创 2016-08-24 17:05:34 · 11555 阅读 · 0 评论 -
【稀饭】react native 实战系列教程之首页列表UI实现
首页设计与实现首先,这章节讲的是首页内容的设计与实现,不包括主界面的设计,因为一开始入手,我希望能立马获取到数据并能展示出来,后面再来搭木积似的一步一步把整体框架做起来。设计(图丑,莫见怪~)主界面的设计如下首页的设计如下有人可能会觉得,为什么不把TitleBar抽出来放在主界面,而要单独放在每个页面里。因为,这个跟你把Navigator(页面导航器)放在什么地方有关系,现在先不说为什么,就这么认为原创 2016-08-26 10:57:19 · 2871 阅读 · 3 评论 -
【稀饭】react native 实战系列教程之Navigator实现页面跳转
主界面开发上一节,我们已经完成了首页的开发,现在,我们继续完成主界面的开发,就是添加底部‘首页’和‘我的’两个tabbar。在js/文件夹下,新建MainScene.js文件import React,{Component} from 'react';import { View, Text, TouchableOpacity, Image, StyleShee原创 2016-09-18 14:59:27 · 3681 阅读 · 2 评论 -
【稀饭】react native 实战系列教程之自定义原生UI组件
上一节,讲了关于RN的自定义原生模块,本节是关于自定义原生UI组件,学习完本节,你将了解到原生UI组件的开发流程,以及js如何向native发送命令和native如何向js发送事件。原生UI组件之VideoView视频播放器开发React Native并没有给我们提供VideoView这个组件,那我们要播放视频的话,有两种方法:一种是借助WebView,一种就是使用原生的播放器。这里我们就介绍下,如原创 2016-09-23 15:05:44 · 10515 阅读 · 22 评论 -
【稀饭】react native 实战系列教程之完成首页
首页功能前面,我们已经完成了影视信息组件的开发,接下来,我们要用该组件来完成首页界面功能的开发,如下图可以看到,首页顶部一个标题栏,下面是‘最新’、‘最热’两个选项卡。我们要完成的有标题栏、选项卡、以及选项卡切换的内容。标题栏这里的标题栏,我们使用的是ToolbarAndroid,看名称我们就知道这个是android下特有的组件view,所以就立马想到,这个组件是ios、android不能通用的。因原创 2016-09-02 14:51:53 · 3624 阅读 · 3 评论 -
【稀饭】react native 实战系列教程之影片数据获取并解析
获取网络数据在上一节,我们已经通过模拟数据,并将UI展示出来。这节我们将获取网络数据。数据来源于网络,仅用于学习使用。fetch介绍fetch是react native的一个网络请求库,使用该库不用引入模块,可以直接使用。一个简单的请求如下:fetch('http://facebook.github.io/react-native/movies.json')发起请求之后,我们还需要对它的响应进行处理原创 2016-08-31 14:58:22 · 4409 阅读 · 4 评论 -
【稀饭】react native 实战系列教程之项目初始化
项目前期准备工作本系列课程实战,默认是你已经安装好react native所需的一切环境配置,如果你还没配置好,请事先看下中文官网。这里提一下,如果你在安装Chocolatey过程中出错了,一般是权限问题,你需要以管理员的身份来启动cmd命令行,然后再执行安装即可。本系列课程的开发环境:系统:win10IDE:webstorm、sublime text 3、android studio调试机:原创 2016-08-26 10:56:09 · 1771 阅读 · 0 评论 -
使用原生自定义View,setState刷新界面后UI不能正常显示
背景项目整合react native时,将原生的一个九宫格图片显示,封装成了RN控件,并提供了一个source属性@ReactProp(name = "source")问题在js端使用该控件时,通过state初始化时给source赋值,然后,当添加图片是,通过setState刷新数据来刷新界面显示,理想状态下是,界面应该显示新增的图片,但是,当setState之后,控件上的图片就不显示了!!尝试着给原创 2017-02-24 16:27:56 · 3698 阅读 · 0 评论