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

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

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

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

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

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

unable to resolve module

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

关于RN listview item ref

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

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

一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用。组件导出的关键字是exprot default没有加default时,例如:export class Template{}当然,你可以在单个js文件里声明多个组件,例如Templates.jsexport class Template{} export class AnotherTemplate{}这样在其他文件引用时,需要使...
阅读(5212) 评论(0)

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

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

关于state刷新界面的思考

我们知道当state更新时,界面会重新绘制,render会被执行,但是一个界面包含许多控件,state更新导致界面重绘,那么是否所有的控件都重绘呢?验证通过一个点击事件来改变state的值,然后看看界面有什么变化,代码如下:import React,{Component} from 'react'; import { View, TouchableOpacity, Text,...
阅读(1942) 评论(0)

react native navigator关闭侧滑手势

我们在使用Navigator进行页面跳转的时候,会配置跳转动画configureScene,但是你会发现,我们使用侧滑手势的时候,页面会拉动,会导致或页面关闭或打开页面。如果我们不希望让它响应侧滑手势呢?解决如下:在使用Navigator时,配置configureScene的gestures为nullconfigureScene={(route) => { var conf = Navigato...
阅读(2101) 评论(2)

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

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

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

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

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

影片详情开发也是通过Cheerio抓取并分析网页获取到的详情数据,本节就不作为详细内容来讲解了,详细的代码可以看下我的github,效果如下:在点击播放时,会跳转到播放界面,并且横屏显示,退出播放界面时,会恢复到竖屏状态。但是,react native并没有给我们提供设置横竖屏的API,因此,我们需要自己使用原生的代码来完成此功能。使用原生代码,我们可以为react native作什么呢? 一个是功...
阅读(2451) 评论(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...
阅读(3183) 评论(1)
26条 共2页1 2 下一页 尾页
    个人资料
    • 访问:643114次
    • 积分:4782
    • 等级:
    • 排名:第6297名
    • 原创:106篇
    • 转载:22篇
    • 译文:5篇
    • 评论:344条
    关于我
    博客专栏
    最新评论