Songlcy
这个作者很懒,什么都没留下…
展开
-
React Navigation 路由导航库升级 5.x
当前版本:3.0.0升级版本:5.12.8安装依赖$yarnadd @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-n...原创 2020-12-08 16:57:09 · 5011 阅读 · 6 评论 -
setState执行的背后是什么
react-native技术交流微信群,定期会分享react native 技术文章,移动技术干货,精彩文章技术推送。欢迎各位大牛,React Native技术爱好者加入交流!在React Native 或 React 的日常开发中,与State的接触必不可少。当我们需要让界面重新渲染时,需要去刷新State(setState)的当前状态,促使组件重新render。setSta...原创 2018-07-08 00:08:00 · 1281 阅读 · 2 评论 -
React Native Gif图插件封装
React Native Gif图插件,已在Github开源,猛戳: react-native-gifview关于如何封装原生组件的教程,可以参考我之前的文章:React Native 封装Android原生组件最详教程功能支持:加载、播放、暂停等。 一、配置【 Android 平台配置 】1. 将android_gifview文件夹拖入android工程包名目录下,例如 com.xxx。2. ...原创 2018-04-23 10:17:13 · 2064 阅读 · 0 评论 -
React Native 十万个为什么(开发问题整理)
扫码加入react-native技术交流群。定期会分享react native 技术文章,移动技术干货,精彩文章技术推送。欢迎各位大牛, React Native技术爱好者加入交流!在ScrollView中切换输入框<TextInouput>,为什么需要点击两次才能实现?答:这是由于ScrollView也会相应点击事件,解决这个问题,只需要在ScrollView组件中添加两个属性:k...原创 2018-04-18 15:40:24 · 555 阅读 · 0 评论 -
React Native封装Android原生UI组件最详教程
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。篇幅预计阅读时间10分钟,结尾有福利~~ 前些天群里有朋友说想了解如何在React Native项目中使用封装原生View组件,之前有写过一篇Android原生层与React Native 交互的文章,感兴趣的朋友可以看一下。今天要分享的如何封装原生View组件在React Native项目中...原创 2018-04-17 18:16:58 · 8368 阅读 · 3 评论 -
React Native未来导航库:react-navigation 使用详解(进阶篇)
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看:React Native未来导航者:react-navigation 使用详解(基础篇)(1)适配顶部导航栏标题: 测试中发现,在iphone上标题栏的标题为居中状态,而在Android上则是居左对齐。所以需要我们修改源码,...原创 2018-03-06 17:44:25 · 4426 阅读 · 4 评论 -
RN JSBundle 拆分解决方案(1): 应用启动、视图加载原理解析
前两篇文章和大家分享了RN中的触摸事件机制。链接如下:React Native 手势触摸事件机制详解(基础篇)React Native 手势触摸事件机制详解(进阶篇)接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验,并且在实践 Android + RN 的混合模式开发,那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致...原创 2018-02-22 14:57:46 · 3783 阅读 · 4 评论 -
React Native 手势触摸事件机制详解(基础篇)
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。 源码已开源到Github,详细代码可以查看:《React Native 触摸事件代码实践》。 博客产出拖延了很久,老早定的主题现在才开始写。之前群里朋友对于React Native(以下简称RN)中手势触摸相关问题提出的频率很高,并且在实际开发过程中较难理解和处理。本篇内容将围绕...原创 2018-09-26 16:07:47 · 6008 阅读 · 0 评论 -
React Native 手势触摸事件机制详解(进阶篇)
源码已开源到Github,详细代码可以查看:《React Native 触摸事件代码实践》。在基础篇,对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇:《 React Native 手势触摸事件机制详解(基础篇)》本篇博客中,同样延续基础篇中结尾的内容,对触摸事件的执行流程从代码层执行流程进行更深的说明,并使用RN系统提供的...原创 2018-10-20 14:41:11 · 4049 阅读 · 1 评论 -
RN JSBundle 拆分解决方案(3): 固定ModuleId,JSBundle按需加载
实践源码:react-native-split-bundle:https://github.com/songxiaoliang/react-native-split-bundle前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析,逐步了解关于RN打包,Bundle 文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前,可以点击如...原创 2018-11-30 12:56:28 · 3484 阅读 · 5 评论 -
RN JSBundle 拆分解决方案(2): JSBundle 、Metro 结构分析
在第一篇(RN JSBundle 拆分解决方案(1): 应用启动、视图加载原理解析)中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构,以及当前RN框架默认的打包工具 Metro 进行分析。JSBundle 文件结构当我们执行 react-native bundle | unbundle 命令时,RN框架会按照当前给定的参数,打...原创 2018-11-27 18:35:56 · 4778 阅读 · 0 评论 -
在 React Native 中使用 Hooks
React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks,我们来了解一下。什么是Hooks?在平时开发过程中,我们一般都会遇到如下问题:1. 难以重用和共享组件中的与状态相关的逻辑2. 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 state 时,每个生命周期函数中可能会包含...原创 2019-03-13 16:15:03 · 7755 阅读 · 3 评论 -
React Native WebView 实现滑动监听
React Native 的 WebView控件默认是没有滚动监听的,实战开发中有可能会遇到监听webview滚动距离的需求,我们可以通过修改源码来实现。 (1)iOS端实现方式 (2)Android端实现方式...原创 2018-02-28 18:10:09 · 3081 阅读 · 0 评论 -
React Native未来导航库:react-navigation 使用详解(基础篇)
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。上篇博客和大家分享了关于React Native jsBundle预加载,界面启动优化的内容,详情可点击:基于最新版本React Native实现JsBundle预加载,界面秒开优化一、开源库介绍今年1月份,新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,gith...原创 2017-05-17 11:30:25 · 93772 阅读 · 45 评论 -
React Native 如何区分系统平台,动态加载组件
Android 平台下, React Native WebView 的官方组件,无法上传文件,<input type = "file"> 不能打开文件对话框,需要自己监听事件去扩展。幸好这里有一个封装好的库,可以直接使用:https://github.com/lucasferreira/react-native-webview-android那么问题来了,这个库只有andr原创 2017-10-20 09:38:20 · 2398 阅读 · 0 评论 -
React-Native ART 绘图简析
刚创建的React Native 微信公众号,欢迎微信扫描关注订阅号,每天定期会分享react native 技术文章,移动技术干货,精彩文章技术推送。同时可以扫描我的微信加入react-native技术交流微信群。欢迎各位大牛,React Native技术爱好者加入交流!本篇博客依旧是关于 React Native 的开发内容。今天和大家唠唠 React Native 中绘图机制:...原创 2017-10-23 16:24:33 · 3437 阅读 · 0 评论 -
CodePush热更新常用命令与注意事项
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。总结了一些在CodePush中比较常用的命令以及注意事项,供大家参考。一、更新流程图片来源:http://www.jianshu.com/p/cbc6a1dbfe30二、常用命令// 账户相关code-push login 登陆code-push loout 注销code-push a...原创 2017-10-25 18:43:18 · 10190 阅读 · 0 评论 -
简析在React Native中如何适配iPhoneX
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。一、介绍iPhone X 发布也有一段时间了,独特的 "齐刘海",以及 "小嘴巴" 带给了苹果粉们无限的遐想,同时也带来众多的吐槽。前几天,招商银行公众号在微信推送了一条消息,11月招商银行App要发布最新版本,完美适配iPhoneX,是国内第一家银行App适配iPhoneX。感兴趣的朋友可以去下...原创 2017-11-09 12:40:42 · 10172 阅读 · 5 评论 -
简析 React Native 用户反馈功能实现
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。该库已开源到Github,地址请点击:react-native-feedback 【一行代码,双平台反馈】用户反馈功能在App中屡见不鲜了。尤其是创业公司,在前期都会添加该功能来帮助自己更好的定位产品,以及收集产品的问题。在App中实现该功能大概有两种:(1)搭建自己的私有服务器,收集反馈数据...原创 2017-11-18 11:48:51 · 2370 阅读 · 4 评论 -
React Native集成Sentry错误日志统计
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。App版本升级想必大家都不陌生。原生开发中App升级方式有很多种,Android和iOS也不尽相同。大致区别如下:App错误收集的实现方式有很多,例如友盟、Bugly、阿里云、Sentry等等。本篇博客和大家分享一下在React Native中集成Sentry的流程和注意事项。在React Native...原创 2017-12-04 21:25:16 · 6579 阅读 · 0 评论 -
React Native 实现热部署、差异化增量热更新
项目已开源到github,链接为:ReactNativeApp,欢迎大家fork,star上一篇和大家分享了如何在Android 现有App中集成React Native。本篇博客同样是React Native中比较经典的内容:热更新部署。Android原生App中我们实现热修复有很多种选择:Tinker、hotFix、Qzone的热更新等等。基本的思路都是大同小异的。React Nati...原创 2017-02-14 11:37:04 · 35931 阅读 · 58 评论 -
React Native仿美团下拉菜单
本篇博客转自:http://blog.csdn.net/xiangzhihong8/article/details/76862097在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使用React Native开发上面的效果,需要注意几个问题: 1、 在下拉的时候有动画转载 2017-10-27 18:10:15 · 2612 阅读 · 1 评论 -
React Native App版本升级方案解析
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。源码已开源到Github,地址请点击:react-native-upgrade欢迎大家star,fork.....App版本升级想必大家都不陌生。原生开发中App升级方式有很多种,Android和iOS也不尽相同。大致区别如下:(1)iOS中由于不能从App Store之外下载ipa文件进行安...原创 2017-08-15 14:43:26 · 14035 阅读 · 31 评论 -
React Native实现第三方分享、登录功能(Android,IOS双平台)
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。源码已开源到Github,地址请点击:react-native-share【一行代码,双平台分享】目前支持分享的平台有【QQ】【QQ空间】【微信】【朋友圈】【微博】【FaceBook】 欢迎大家star,fork.....【 Android平台配置 】1. app目录下创建libs文件...原创 2017-07-12 20:30:27 · 15636 阅读 · 36 评论 -
React-Navigation与Redux整合详解
继react-navigation发布已经过去半年的时间,想必React Native的玩家早已玩转于原创 2017-07-03 14:42:49 · 3285 阅读 · 2 评论 -
React Native自定义View解析Emoji
一、需求准备在react native的类中实现可以解析多种字符格式的内容并放入到指定文本中。效果图如下:emoji_example_1二、Emoji封装将需要对应好的Emoji表情图片放到指定文件夹,然后写一个公共的Const.js封装成一个对象,实现变量与图片资源的关系映射:export const emojiReflection = { // emoji表情对应转载 2018-01-07 23:14:05 · 866 阅读 · 0 评论 -
React Native开源项目 「漫画书」
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。项目已开源到Github:ComicApp,欢迎大家fork,star。一、App模块开发框架:React Native react-redux react-thunk开发环境:Vs Code 1.8分为首页、发现、精选、我四大版块,以下是功能列表:使用ViewPager...原创 2017-02-05 17:10:13 · 9356 阅读 · 22 评论 -
Android 集成 React Native、原生视图加载RN组件模块分析
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。今天分享一篇关于混合开发的文章: 如何在现有的 Android 项目中集成 React Native,以及如何在原生 Activity中加载 RN 视图。原生项目 集成 React Native1.创建Android工程:ReactNativeApp 关于如何创建Android工程就不再多述了。...原创 2017-02-13 18:01:24 · 16340 阅读 · 25 评论 -
React Native与Android通信交互
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。在前两篇的内容中,和大家分享了Android原生集成RN,以及RN的增量热更新。关于详细的内容,点击如下具体了解: Android App巧妙集成React Native最详教程 React Native 实现热部署、增量热更新本篇内容同样和React Native 与 原生App有关,可...原创 2017-02-17 11:56:16 · 20861 阅读 · 29 评论 -
React Native基于最新版本实现JsBundle预加载,解决白屏等待,界面秒开优化
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。前些时间和大家分享了一系列关于React Native For Android的文章。这两天又对React Native增量热更新的博客进行了填充,增加了图片增量更新的实现方案和过程。有兴趣的朋友可以去浏览详细内容。为了方便,我将前几篇的博客链接贴出来供大家参考:Android原生项目集成React Native...原创 2017-05-10 16:48:09 · 16106 阅读 · 26 评论 -
React Native开源库react-native-image-crop-picker使用图解
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。一、开源库介绍目前大多数App都有头像展示的功能,在实际开发中,用户更换头像的需求屡见不鲜,社交方面的更为明显。在React Native的开发下,同样需要这样的功能来完善App需求。众多优秀的开源库让我们在自己的项目中使用起来非常方便。例如:react-native-image-pick...原创 2017-05-27 15:16:44 · 14308 阅读 · 44 评论 -
React Native自定义控件【底部抽屉菜单】
欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台开发技术实践。一、需求分析原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义View的内容网上已经有很多的博文,本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必...原创 2017-06-26 21:46:57 · 7000 阅读 · 0 评论 -
Android布局加载React Native视图
一、需求分析前几篇博客中,和大家分享了关于React Native For Android 的一系列内容,以及React Native第三方库的使用技巧。今天和大家分享的内容可以算是React Native基于最新版本实现JsBundle预加载,界面秒开优化延伸。本篇博客内容围绕的依然是如何加载RN界面,在JsBundle加载优化这篇博客中,我们从源码角度分析了如何实现快速加载原创 2017-06-30 12:32:56 · 4313 阅读 · 3 评论 -
React Native 自定义实现【Toast】提示框
Toast提示框原创 2017-10-27 16:21:44 · 4852 阅读 · 0 评论