...

React Native 暗黑模式实践方案

React 性能优化理念的主要方向简单概括为两个：减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconciliation(简单可以理解为 diff)，如果不 render，就不会 reconciliation。 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。关于类组件的渲染优化，...

React Native 包体积优化实践

React Native SDR实践

源码已上传Github：https://github.com/songxiaoliang/native-read-rn-image在ReactNative开发过程中，有时需要在原生端显示RN里的图片，这样的好处是可以通过热更新来更新APP里的图片，而不需要发布原生版本，而ReactNative里图片路径是相对路径，类似'./xxximage.png'的写法，原生端是无法解析这类路径，那么如果将...

Detox 是什么？在创建新功能或修复错误后，我们通常会在我们的设备上安装该应用并手动测试。但是，当我们想要在标记版本之前验证所有新旧功能时，此过程可能会很麻烦。解放双手，是我们梦寐以求的。Detox，一个用于测试 React Native 应用程序 Selenium 界面的端到端自动化测试工具。Detox 是为移动端APP打造的灰盒端到端自动化测试框架。在 ReactNat...

源码已上传 Github:react-native-app-font“怎么又是字体，老常的话题现在还拿出来说。关于字体适配的解决方式网上一搜几十篇！”。看到标题的烙铁心里一万个xxx疾驰飞腾。But! 我总是会给大家带点什么惊喜。关于 pxToDp、启动缩放 我们一点不说。本篇博客的主题很简单：如何控制App字体不随系统字体改变？系统字体改变一般有两种情况：（1）调整系统字...

图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存，GPU渲染都与PC有较大差别，所以在App应用开发中，需要我们单独分析处理。今天我们聊聊在React Native开发中，如...

React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks，我们来了解一下。什么是Hooks?在平时开发过程中，我们一般都会遇到如下问题：1. 难以重用和共享组件中的与状态相关的逻辑2. 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 state 时，每个生命周期函数中可能会包含...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。前不久开源了用Flutter开发的一个音视频类App客户端，欢迎大家star, fork。⚠️ 项目地址：https://github.com/songxiaoliang/visitor-flutter⚠️ 本篇博客涉及的源码全部开源在Github，地址：https://github.com/songxiao...

项目已开源到 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主模块分为首页...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述App主题切换已经成为了一种流行的用户体验，丰富了应用整体UI视觉效果。例如，白天夜间模式切换。实现该功能的思想其实不难，就是将涉及主题的资源文件进行全局替换更新。说到这里，我想你肯定能联想到一种设计模式：观察者模式。多种观察对象（主题资源）来观察当前主题更新的行为（被观察对象），进行主题的更新。今天和大家分...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。在React Native跨平台开发框中，我们经常会看到，当界面组件层次嵌套深，组件交互涉及业务逻辑时，为了代码层次简洁、清晰，都会将组件拆分到方法中，然后在主布局中引入，例如：render() { return ( &lt;View style={{ flex: 1, backgroundCo...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。述还有 10 天就要迎来 2019 新年，感慨 18 年过的好快，恍恍惚惚。2018 年经历了很多，人生最重要的事情，很开心。闲余时间浏览了这一年写过的博客，9 篇相对 17 年少了很多。时间不等人，什么事还是要提前计划往前做。本来是要等新年再和大家分享新的内容，回头看看还是以整数结尾这一年，也算欣慰。这篇博...

实践源码：react-native-split-bundle：https://github.com/songxiaoliang/react-native-split-bundle前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析，逐步了解关于RN打包，Bundle 文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前，可以点击如...

 在第一篇（RN JSBundle 拆分解决方案（1）: 应用启动、视图加载原理解析）中我们对RN的启动、视图加载流程从源码角度做了简单的梳理。本篇内容我们继续对JSBundle 文件内容结构，以及当前RN框架默认的打包工具 Metro 进行分析。JSBundle 文件结构当我们执行 react-native bundle | unbundle 命令时，RN框架会按照当前给定的参数，打...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述昨天技术交流群里有个朋友提出一个问题，在 Android 中嵌入了 React Naitve，并且想从RN层执行代码，回到上一个原生Activity。说起来比较模糊，假设他的界面执行流程如下：ActivityA→ActivityB →RNActivityA→ JS端执行代码→...

 源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。在基础篇，对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇：《 React Native 手势触摸事件机制详解（基础篇）》本篇博客中，同样延续基础篇中结尾的内容，对触摸事件的执行流程从代码层执行流程进行更深的说明，并使用RN系统提供的...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。 博客产出拖延了很久，老早定的主题现在才开始写。之前群里朋友对于React Native（以下简称RN）中手势触摸相关问题提出的频率很高，并且在实际开发过程中较难理解和处理。本篇内容将围绕...

React Native Gif图插件，已在Github开源，猛戳: react-native-gifview关于如何封装原生组件的教程，可以参考我之前的文章：React Native 封装Android原生组件最详教程功能支持：加载、播放、暂停等。  一、配置【 Android 平台配置 】1. 将android_gifview文件夹拖入android工程包名目录下，例如 com.xxx。2. ...

扫码加入react-native技术交流群。定期会分享react native 技术文章，移动技术干货,精彩文章技术推送。欢迎各位大牛, React Native技术爱好者加入交流！在ScrollView中切换输入框&lt;TextInouput&gt;，为什么需要点击两次才能实现？答:这是由于ScrollView也会相应点击事件，解决这个问题,只需要在ScrollView组件中添加两个属性:k...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。篇幅预计阅读时间10分钟，结尾有福利~~ 前些天群里有朋友说想了解如何在React Native项目中使用封装原生View组件，之前有写过一篇Android原生层与React Native 交互的文章，感兴趣的朋友可以看一下。今天要分享的如何封装原生View组件在React Native项目中...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看：React Native未来导航者：react-navigation 使用详解（基础篇）（1）适配顶部导航栏标题： 测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，...

React Native 的 WebView控件默认是没有滚动监听的，实战开发中有可能会遇到监听webview滚动距离的需求，我们可以通过修改源码来实现。 （1）iOS端实现方式 （2）Android端实现方式...

前两篇文章和大家分享了RN中的触摸事件机制。链接如下：React Native 手势触摸事件机制详解（基础篇）React Native 手势触摸事件机制详解（进阶篇）接下来的系列内容将结合 Android 原生层来分析拆包解决方案。如果你具有Android原生开发经验，并且在实践 Android + RN 的混合模式开发，那么这次连载的文章内容你一定喜欢。拆包解决方案的系列内容目录大致...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。App版本升级想必大家都不陌生。原生开发中App升级方式有很多种，Android和iOS也不尽相同。大致区别如下：App错误收集的实现方式有很多，例如友盟、Bugly、阿里云、Sentry等等。本篇博客和大家分享一下在React Native中集成Sentry的流程和注意事项。在React Native...

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。总结了一些在CodePush中比较常用的命令以及注意事项，供大家参考。一、更新流程图片来源：http://www.jianshu.com/p/cbc6a1dbfe30二、常用命令// 账户相关code-push login 登陆code-push loout 注销code-push a...

一、需求分析前几篇博客中，和大家分享了关于React Native For Android 的一系列内容，以及React Native第三方库的使用技巧。今天和大家分享的内容可以算是React Native基于最新版本实现JsBundle预加载，界面秒开优化延伸。本篇博客内容围绕的依然是如何加载RN界面，在JsBundle加载优化这篇博客中，我们从源码角度分析了如何实现快速加载

一、需求分析今天一个朋友说要解决一个需求，在每个布局中加上水印效果，如下图： 从图中，我们看到在内容布局中很明显有文字水印效果，如何实现这种效果呢：（1）水印文字有旋转（2）水印效果处于内容布局之下（3）水印文字位置不固定分析以上三步，想必大家都想到了，利用Android自定义View的方式来实现。二 、功能实现

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。前些时间和大家分享了一系列关于React Native For Android的文章。这两天又对React Native增量热更新的博客进行了填充，增加了图片增量更新的实现方案和过程。有兴趣的朋友可以去浏览详细内容。为了方便，我将前几篇的博客链接贴出来供大家参考：Android原生项目集成React Native...

一、背景App的上线发布是我们程序猿开心的事情，证明着一段时间来成果的进步和展现。但是随着App的上线手机App市场，接下来的更新维护工作便成了”家常便饭“。尤其是在创业公司，随着业务等不稳定性因素，前期App的更新工作更为频繁，可能两天一小改，三天一大改的情况经常发生。那么应对版本更新的同时，需要我们不断将新版本上线，并下发到用户，此时两个典型的问题发生了：（1）发版的周期过

最近公司项目需求更新慢，有时间偷偷的玩点别的技术~~这段时间更新的博客内容不太系统，但也是平时比较常用的技术。今天和大家分享一篇关于ReclcyerView的内容。说到RecyclerView，想必大家都已玩的熟透在心了。之前有人问我ListView和RecyclerView的区别是什么？并且很多人认为RecyclerView比ListView强多了。的确，RecyclerView在动画处

一、绪之前在群里看到有人在讨论Android VideoView的使用，发现大家都存在几个共同的问题。为了以后大家使用方便也为了自己使用方便，同样减少不必要的坑，便有了今天的内容，对Android VideoView播放器进行功能封装。封装代码库已开源到Github：SuperVideoView，有兴趣的朋友可以fork，顺便记得star下哈~下面简单介绍下该库增加的功能，以及

一、绪个人开发的小伙伴们，还在因为开发App需要搭建后台而烦恼吗？今天和大家分享一个云端服务Bmob，Bmob提供了很多功能，例如：数据服务、支付功能、即时推送等等。方便我们快捷实现App开发，减少冗余工作。Bmob官方网站：http://www.bmob.cn/博客内容着重来说如何在Android中集成Bmob，以及对数据的CRUD操作。二、集成三、功能实

一、绪前两天在群里和基友聊LOFTER，一直感兴于照片App的我突然想到了一款国外的App，用于记录去过的地方：  如果两者结合，就可以将拍照和地图放在一起，多么美妙哇~ 当我提到这个想法时，基友一脸不屑说，iphone早已经自带了这种效果：  当时真是被泼冷水啊~不过，虽然已经有了这样的产品，那么我们可以了解下其中的实现原理，也不枉老夫的一片爱慕之心。在i

一、绪上篇博客和大家分享了设计模式中的观察者模式，以经典案例和实战分析了观察者模式的使用技巧。以 “猫叫，老鼠就跑” 带你了解观察者模式今天继续和大家分享一篇关于设计模式的内容。想必有些朋友看到设计模式几字就有点精神错乱，四肢麻木。哈哈，开个玩笑。我不会以单纯描述设计模式来表达，这样的博客随便一搜很多。既然要说设计模式，毕竟缺少不了实战的结合。二、介绍设计模式所

前面用了大概6篇和大家分享了关于JNI的一系列内容，相信大家看过后肯定对JNI有了大致的了解。其实JNI的主要内容基本都是API的一些使用操作。最近在研究Android音视频的一些内容，今天就和大家分享一下如何编译ffmpeg并集成到Android Studio环境下使用。提示：1. 编译ffmpeg基于window10环境2. Android Studio版本为2.2+3.

在前面的几节中，向大家详细介绍了JNI中字符串，数组，字段和方法，异常，线程等核心内容，包括函数的使用以及注意事项。帮助大家尽快入门入门掌握JNI核心模块。 Android NDK（三）：JNI 字符串 Android NDK（四）：JNI 数组 Android NDK（五）：字段和方法 Android NDK（六）：局部引用和全局引用 Android NDK（

今天来唠唠JNI中关于多线程。多线程，即多个线程同时工作，多线程的问题比较复杂，在实际情况下可能会面临众多的问题。JNI中也提供了一系列函数帮助我们完成多线程交互。博客内容大致分为如下： 1. 同步代码块 2. 等待唤醒本篇内容可能介绍的比较浅显，更多的东西还需要大家再实战中去慢慢体会。一、同步代码块如果本地代码要运行在多个线程环境中，可能会面临同时共享资源的情况。

上一篇博客分析了JNI中的引用，以及在使用时需要注意的情况。Android NDK（六）：局部引用和全局引用本篇博客内容和大家唠唠JNI中对异常的处理。说起异常，大家肯定都不陌生。几乎每天都在跟bug，异常打交道。在Android中我们处理异常的方式一般都是：发现异常、捕获异常（向上层抛出异常）、处理异常。JNI中对于异常的处理和Andrid很相似。基本的流程都是检查异常，捕获异常，抛出异常，