我也要用- 博客(238)
- 资源 (60)
- 收藏
- 关注
RSS订阅
原创 Genebox小程序持续交付平台化解决方案
背景流程长且无明确规范，导致整个过程较为艰辛。下图展示了一次发版工作最基本的工作内容，其中还省略了各种通知、确认环节。可以看到，前端研发在其中承担了较多的重复工作。问题 1. 多个/多端小程序同时发版上传操作需要打开各自平台不同的开发者工具（多端情况下），后续送审、发布环节则需要在各小程序管理后台进行手工操作（重复繁琐）。开发周期紧张，发版频率高没有固定的发版周期，单个小程序每周可能会发布n次，对于前端同学来说，这可能意味着需要更频繁的在正常工作及发版任务中进行切换，...
2021-04-10 11:26:21
101
原创 AOP在Genebox小程序网络请求上的应用
genebox-mini-request 是基于JS Decorator 和 Taro 实现的网络请求，专注于实现对网络请求的使用优化。背景当前小程序端网络请求模块使用 request utils 统一处理，通过配置请求模块，动态生成 request task，并通过该实例发起请求。额外的 options 配置参数需要单独传入高阶函数，目前仅支持header，超时时长配置。存在的问题： 请求参数配置存在一定局限性，不易扩展 请求模版的创建增加重复性代码 请求模版配置与具体使用分离，
2020-11-04 21:01:38
179
原创 React Native 函数式组件优化实践
React 性能优化理念的主要方向简单概括为两个：减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconciliation(简单可以理解为 diff)，如果不 render，就不会 reconciliation。 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。关于类组件的渲染优化，...
2020-04-14 14:27:33
1524
原创 Git代码提交规范
随着团队不断扩大，git 的 commit 信息需要按照一定的格式规范，以便在需要的时候方便使用。提交信息可以方便的定位问题, 代码 review 的时候也知道了该次 commit 干了什么，所以 commit 标准化好处很多，不再多说实现 结合 git hook 实现在 git commit 阶段检查输入是否符合规范，符合通过，反之提示工具commitlint：用于检查提交信息,...
2020-03-04 16:44:38
854
原创 原生端（iOS和Android）读取ReactNative本地图片
源码已上传Github：https://github.com/songxiaoliang/native-read-rn-image在ReactNative开发过程中，有时需要在原生端显示RN里的图片，这样的好处是可以通过热更新来更新APP里的图片，而不需要发布原生版本，而ReactNative里图片路径是相对路径，类似'./xxximage.png'的写法，原生端是无法解析这类路径，那么如果将...
2019-05-24 19:49:15
2476
原创 Detox实现ReactNative E2E自动化测试
Detox 是什么？在创建新功能或修复错误后，我们通常会在我们的设备上安装该应用并手动测试。但是，当我们想要在标记版本之前验证所有新旧功能时，此过程可能会很麻烦。解放双手，是我们梦寐以求的。Detox，一个用于测试 React Native 应用程序 Selenium 界面的端到端自动化测试工具。Detox 是为移动端APP打造的灰盒端到端自动化测试框架。在 ReactNat...
2019-05-16 21:41:55
1600
2
原创 React Native字体适配解决方案
源码已上传 Github:react-native-app-font“怎么又是字体，老常的话题现在还拿出来说。关于字体适配的解决方式网上一搜几十篇！”。看到标题的烙铁心里一万个xxx疾驰飞腾。But! 我总是会给大家带点什么惊喜。关于 pxToDp、启动缩放 我们一点不说。本篇博客的主题很简单：如何控制App字体不随系统字体改变？系统字体改变一般有两种情况：（1）调整系统字...
2019-05-12 22:40:51
3057
原创 React Native图片资源使用方案
图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存，GPU渲染都与PC有较大差别，所以在App应用开发中，需要我们单独分析处理。今天我们聊聊在React Native开发中，如...
2019-04-02 16:38:04
1020
原创 在 React Native 中使用 Hooks
React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks，我们来了解一下。什么是Hooks?在平时开发过程中，我们一般都会遇到如下问题：1. 难以重用和共享组件中的与状态相关的逻辑2. 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 state 时，每个生命周期函数中可能会包含...
2019-03-13 16:15:03
6940
3
原创 Android 集成 Flutter 及通信交互详解
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。前不久开源了用Flutter开发的一个音视频类App客户端，欢迎大家star, fork。⚠️ 项目地址：https://github.com/songxiaoliang/visitor-flutter⚠️ 本篇博客涉及的源码全部开源在Github，地址：https://github.com/songxiao...
2019-01-28 16:18:03
4384
1
原创 基于 Flutter 视频客户端 Vistor【已开源】
项目已开源到 Github：Vistor，欢迎大家 fork，star。模块开发环境：Vs Code (1.30.2) Android Studio 3.+开发框架 ( Flutter sdk: ">=2.0.0-dev.68.0 <3.0.0" )：状态管理：Scoped_model 网络层：Dio 导航库：Fluro主模块分为首页...
2019-01-24 10:16:10
12098
18
原创 Flutter以两种方式实现App主题切换
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述App主题切换已经成为了一种流行的用户体验，丰富了应用整体UI视觉效果。例如，白天夜间模式切换。实现该功能的思想其实不难，就是将涉及主题的资源文件进行全局替换更新。说到这里，我想你肯定能联想到一种设计模式：观察者模式。多种观察对象（主题资源）来观察当前主题更新的行为（被观察对象），进行主题的更新。今天和大家分...
2018-12-26 11:29:27
9288
4
原创 Flutter优化之将小部件拆分为方法将影响渲染性能
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。在React Native跨平台开发框中，我们经常会看到，当界面组件层次嵌套深，组件交互涉及业务逻辑时，为了代码层次简洁、清晰，都会将组件拆分到方法中，然后在主布局中引入，例如：render() { return ( <View style={{ flex: 1, backgroundCo...
2018-12-22 15:56:07
1595
4
原创 CodePush优化之减小更新包体积
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。述还有 10 天就要迎来 2019 新年，感慨 18 年过的好快，恍恍惚惚。2018 年经历了很多，人生最重要的事情，很开心。闲余时间浏览了这一年写过的博客，9 篇相对 17 年少了很多。时间不等人，什么事还是要提前计划往前做。本来是要等新年再和大家分享新的内容，回头看看还是以整数结尾这一年，也算欣慰。这篇博...
2018-12-19 16:21:01
1083
6
原创 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
2905
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
3669
原创 React Native BackHandler exitApp 源码分析
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述昨天技术交流群里有个朋友提出一个问题，在 Android 中嵌入了 React Naitve，并且想从RN层执行代码，回到上一个原生Activity。说起来比较模糊，假设他的界面执行流程如下：ActivityA→ActivityB →RNActivityA→ JS端执行代码→...
2018-11-22 17:29:28
1703
原创 React Native 手势触摸事件机制详解（进阶篇）
源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。在基础篇，对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇：《 React Native 手势触摸事件机制详解（基础篇）》本篇博客中，同样延续基础篇中结尾的内容，对触摸事件的执行流程从代码层执行流程进行更深的说明，并使用RN系统提供的...
2018-10-20 14:41:11
3559
1
原创 React Native 手势触摸事件机制详解（基础篇）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。 博客产出拖延了很久，老早定的主题现在才开始写。之前群里朋友对于React Native（以下简称RN）中手势触摸相关问题提出的频率很高，并且在实际开发过程中较难理解和处理。本篇内容将围绕...
2018-09-26 16:07:47
5396
原创 React Native v0.56.0 最新版本更新日志
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。React Native v0.56.0 已发布，这也是属于 6 月的更新发布！FB开发团队表示，自3月以来，超过 60 位贡献者贡献了 816 个 commit。另外，由于这个新版本有一些重要的破坏性变化需要大量的额外工作才能使其达到稳定的状态，这也是月度发布周期中跳过4月和5月的主要原因。同时官方表示，...
2018-07-05 15:07:14
2350
原创 React Native封装Android原生UI组件最详教程
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。篇幅预计阅读时间10分钟，结尾有福利~~ 前些天群里有朋友说想了解如何在React Native项目中使用封装原生View组件，之前有写过一篇Android原生层与React Native 交互的文章，感兴趣的朋友可以看一下。今天要分享的如何封装原生View组件在React Native项目中...
2018-04-17 18:16:58
7894
3
原创 React Native未来导航者：react-navigation 使用详解（进阶篇）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看：React Native未来导航者：react-navigation 使用详解（基础篇）（1）适配顶部导航栏标题： 测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，...
2018-03-06 17:44:25
4094
4
原创 RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析
前两篇文章和大家分享了RN中的触摸事件机制。链接如下：React Native 手势触摸事件机制详解（基础篇）React Native 手势触摸事件机制详解（进阶篇）接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验，并且在实践 Android + RN 的混合模式开发，那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致...
2018-02-22 14:57:46
3167
4
原创 React Native集成Sentry错误日志统计
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。App版本升级想必大家都不陌生。原生开发中App升级方式有很多种，Android和iOS也不尽相同。大致区别如下：App错误收集的实现方式有很多，例如友盟、Bugly、阿里云、Sentry等等。本篇博客和大家分享一下在React Native中集成Sentry的流程和注意事项。在React Native...
2017-12-04 21:25:16
6069
原创 简析 React Native 用户反馈功能实现
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。该库已开源到Github，地址请点击：react-native-feedback 【一行代码，双平台反馈】用户反馈功能在App中屡见不鲜了。尤其是创业公司，在前期都会添加该功能来帮助自己更好的定位产品，以及收集产品的问题。在App中实现该功能大概有两种：（1）搭建自己的私有服务器，收集反馈数据...
2017-11-18 11:48:51
1854
4
原创 简析在React Native中如何适配iPhoneX
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。一、介绍iPhone X 发布也有一段时间了，独特的 "齐刘海"，以及 "小嘴巴" 带给了苹果粉们无限的遐想，同时也带来众多的吐槽。前几天，招商银行公众号在微信推送了一条消息，11月招商银行App要发布最新版本，完美适配iPhoneX，是国内第一家银行App适配iPhoneX。感兴趣的朋友可以去下...
2017-11-09 12:40:42
9738
5
原创 CodePush热更新常用命令与注意事项
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。总结了一些在CodePush中比较常用的命令以及注意事项，供大家参考。一、更新流程图片来源：http://www.jianshu.com/p/cbc6a1dbfe30二、常用命令// 账户相关code-push login 登陆code-push loout 注销code-push a...
2017-10-25 18:43:18
9741
原创 React-Native ART 绘图简析
刚创建的React Native 微信公众号，欢迎微信扫描关注订阅号，每天定期会分享react native 技术文章，移动技术干货,精彩文章技术推送。同时可以扫描我的微信加入react-native技术交流微信群。欢迎各位大牛,React Native技术爱好者加入交流！本篇博客依旧是关于 React Native 的开发内容。今天和大家唠唠 React Native 中绘图机制：...
2017-10-23 16:24:33
2982
原创 React Native App版本升级方案解析
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。源码已开源到Github，地址请点击：react-native-upgrade欢迎大家star，fork.....App版本升级想必大家都不陌生。原生开发中App升级方式有很多种，Android和iOS也不尽相同。大致区别如下：（1）iOS中由于不能从App Store之外下载ipa文件进行安...
2017-08-15 14:43:26
12753
31
原创 React Native实现第三方分享、登录功能（Android，IOS双平台）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。源码已开源到Github，地址请点击：react-native-share【一行代码，双平台分享】目前支持分享的平台有【QQ】【QQ空间】【微信】【朋友圈】【微博】【FaceBook】 欢迎大家star，fork.....【 Android平台配置 】1. app目录下创建libs文件...
2017-07-12 20:30:27
14561
36
原创 React-Navigation与Redux整合详解
继react-navigation发布已经过去半年的时间，想必React Native的玩家早已玩转于
2017-07-03 14:42:49
3066
2
原创 Android布局加载React Native视图
一、需求分析前几篇博客中，和大家分享了关于React Native For Android 的一系列内容，以及React Native第三方库的使用技巧。今天和大家分享的内容可以算是React Native基于最新版本实现JsBundle预加载，界面秒开优化延伸。本篇博客内容围绕的依然是如何加载RN界面，在JsBundle加载优化这篇博客中，我们从源码角度分析了如何实现快速加载
2017-06-30 12:32:56
3976
3
实现下拉式窗帘动画和上拉式抽屉Android动画
2016-04-16
swipelibrary
2015-12-07
children在react中的应用.key
2019-12-16
React Native Modal
2017-09-21
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝