超级会员免费看
Songlcy
这个作者很懒，什么都没留下…
展开
-
React Native 暗黑模式适配实践
React Native 暗黑模式实践方案原创 2020-05-20 15:34:14 · 3676 阅读 · 1 评论 -
React Native 函数式组件优化实践
React 性能优化理念的主要方向简单概括为两个：减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconciliation(简单可以理解为 diff)，如果不 render，就不会 reconciliation。 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。关于类组件的渲染优化，...原创 2020-04-14 14:27:33 · 2327 阅读 · 0 评论 -
React Native 包体积优化实践
React Native 包体积优化实践原创 2020-04-06 16:54:07 · 1359 阅读 · 0 评论 -
React Native SDR 实践
React Native SDR实践原创 2020-03-22 17:00:33 · 581 阅读 · 6 评论 -
基于 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 · 12722 阅读 · 18 评论 -
Android 集成 Flutter 及通信交互详解
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。前不久开源了用Flutter开发的一个音视频类App客户端，欢迎大家star, fork。⚠️ 项目地址：https://github.com/songxiaoliang/visitor-flutter⚠️ 本篇博客涉及的源码全部开源在Github，地址：https://github.com/songxiao...原创 2019-01-28 16:18:03 · 4597 阅读 · 1 评论 -
在 React Native 中使用 Hooks
React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks，我们来了解一下。什么是Hooks?在平时开发过程中，我们一般都会遇到如下问题：1. 难以重用和共享组件中的与状态相关的逻辑2. 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 state 时，每个生命周期函数中可能会包含...原创 2019-03-13 16:15:03 · 7504 阅读 · 3 评论 -
React Native图片资源使用方案
图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存，GPU渲染都与PC有较大差别，所以在App应用开发中，需要我们单独分析处理。今天我们聊聊在React Native开发中，如...原创 2019-04-02 16:38:04 · 1218 阅读 · 0 评论 -
原生端（iOS和Android）读取ReactNative本地图片
源码已上传Github：https://github.com/songxiaoliang/native-read-rn-image在ReactNative开发过程中，有时需要在原生端显示RN里的图片，这样的好处是可以通过热更新来更新APP里的图片，而不需要发布原生版本，而ReactNative里图片路径是相对路径，类似'./xxximage.png'的写法，原生端是无法解析这类路径，那么如果将...原创 2019-05-24 19:49:15 · 2738 阅读 · 0 评论 -
React Native字体适配解决方案
源码已上传 Github:react-native-app-font“怎么又是字体，老常的话题现在还拿出来说。关于字体适配的解决方式网上一搜几十篇！”。看到标题的烙铁心里一万个xxx疾驰飞腾。But! 我总是会给大家带点什么惊喜。关于 pxToDp、启动缩放 我们一点不说。本篇博客的主题很简单：如何控制App字体不随系统字体改变？系统字体改变一般有两种情况：（1）调整系统字...原创 2019-05-12 22:40:51 · 3489 阅读 · 0 评论 -
Detox实现ReactNative E2E自动化测试
Detox 是什么？在创建新功能或修复错误后，我们通常会在我们的设备上安装该应用并手动测试。但是，当我们想要在标记版本之前验证所有新旧功能时，此过程可能会很麻烦。解放双手，是我们梦寐以求的。Detox，一个用于测试 React Native 应用程序 Selenium 界面的端到端自动化测试工具。Detox 是为移动端APP打造的灰盒端到端自动化测试框架。在 ReactNat...原创 2019-05-16 21:41:55 · 1935 阅读 · 2 评论 -
Flutter以两种方式实现App主题切换
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述App主题切换已经成为了一种流行的用户体验，丰富了应用整体UI视觉效果。例如，白天夜间模式切换。实现该功能的思想其实不难，就是将涉及主题的资源文件进行全局替换更新。说到这里，我想你肯定能联想到一种设计模式：观察者模式。多种观察对象（主题资源）来观察当前主题更新的行为（被观察对象），进行主题的更新。今天和大家分...原创 2018-12-26 11:29:27 · 10101 阅读 · 4 评论 -
Flutter优化之将小部件拆分为方法将影响渲染性能
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。在React Native跨平台开发框中，我们经常会看到，当界面组件层次嵌套深，组件交互涉及业务逻辑时，为了代码层次简洁、清晰，都会将组件拆分到方法中，然后在主布局中引入，例如：render() { return ( <View style={{ flex: 1, backgroundCo...原创 2018-12-22 15:56:07 · 1771 阅读 · 4 评论 -
React Native WebView 实现滑动监听
React Native 的 WebView控件默认是没有滚动监听的，实战开发中有可能会遇到监听webview滚动距离的需求，我们可以通过修改源码来实现。 （1）iOS端实现方式 （2）Android端实现方式...原创 2018-02-28 18:10:09 · 2835 阅读 · 0 评论 -
React Native未来导航库：react-navigation 使用详解（进阶篇）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看：React Native未来导航者：react-navigation 使用详解（基础篇）（1）适配顶部导航栏标题： 测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，...原创 2018-03-06 17:44:25 · 4304 阅读 · 4 评论 -
React Native 十万个为什么（开发问题整理）
扫码加入react-native技术交流群。定期会分享react native 技术文章，移动技术干货,精彩文章技术推送。欢迎各位大牛, React Native技术爱好者加入交流！在ScrollView中切换输入框<TextInouput>，为什么需要点击两次才能实现？答:这是由于ScrollView也会相应点击事件，解决这个问题,只需要在ScrollView组件中添加两个属性:k...原创 2018-04-18 15:40:24 · 479 阅读 · 0 评论 -
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 · 1900 阅读 · 0 评论 -
React Native 手势触摸事件机制详解（基础篇）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。 博客产出拖延了很久，老早定的主题现在才开始写。之前群里朋友对于React Native（以下简称RN）中手势触摸相关问题提出的频率很高，并且在实际开发过程中较难理解和处理。本篇内容将围绕...原创 2018-09-26 16:07:47 · 5714 阅读 · 0 评论 -
React Native 手势触摸事件机制详解（进阶篇）
源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。在基础篇，对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇：《 React Native 手势触摸事件机制详解（基础篇）》本篇博客中，同样延续基础篇中结尾的内容，对触摸事件的执行流程从代码层执行流程进行更深的说明，并使用RN系统提供的...原创 2018-10-20 14:41:11 · 3815 阅读 · 1 评论 -
React Native BackHandler exitApp 源码分析
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述昨天技术交流群里有个朋友提出一个问题，在 Android 中嵌入了 React Naitve，并且想从RN层执行代码，回到上一个原生Activity。说起来比较模糊，假设他的界面执行流程如下：ActivityA→ActivityB →RNActivityA→ JS端执行代码→...原创 2018-11-22 17:29:28 · 1805 阅读 · 0 评论 -
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 · 3198 阅读 · 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 · 4293 阅读 · 0 评论 -
CodePush优化之减小更新包体积
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。述还有 10 天就要迎来 2019 新年，感慨 18 年过的好快，恍恍惚惚。2018 年经历了很多，人生最重要的事情，很开心。闲余时间浏览了这一年写过的博客，9 篇相对 17 年少了很多。时间不等人，什么事还是要提前计划往前做。本来是要等新年再和大家分享新的内容，回头看看还是以整数结尾这一年，也算欣慰。这篇博...原创 2018-12-19 16:21:01 · 1224 阅读 · 6 评论 -
CodePush热更新常用命令与注意事项
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。总结了一些在CodePush中比较常用的命令以及注意事项，供大家参考。一、更新流程图片来源：http://www.jianshu.com/p/cbc6a1dbfe30二、常用命令// 账户相关code-push login 登陆code-push loout 注销code-push a...原创 2017-10-25 18:43:18 · 9993 阅读 · 0 评论 -
React Native集成Sentry错误日志统计
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。App版本升级想必大家都不陌生。原生开发中App升级方式有很多种，Android和iOS也不尽相同。大致区别如下：App错误收集的实现方式有很多，例如友盟、Bugly、阿里云、Sentry等等。本篇博客和大家分享一下在React Native中集成Sentry的流程和注意事项。在React Native...原创 2017-12-04 21:25:16 · 6356 阅读 · 0 评论