- 博客(257)
- 资源 (59)
- 收藏
- 关注
RSS订阅
原创 ReactNative实现 RSC Render 的解决方案
服务端渲染简单的可以理解成在服务端进行页面元素结构的下发(json 字符串)，在前端对其解析生成对应的元素树。同样，如果使用字符串来呈现 React Native 视图，则可以创建 0kb JavaScript 的原生 React Server 组件（即不需要提前编译进客户端）。由于需要适应快速的产品模块发布请求，要求在App不发版的场景下，对首页的Banner进行动态更新。需要提前定义可支持的组件以及内置Function代码，例如埋点、点击事件的处理等。1. 定义支持渲染的前端组件。
2024-04-17 16:08:56
106
原创 React Native适配Xcode 15 iOS 17.0+
App Store 更新到 Xcode15 后，无法运行模拟器和真机。需要下载iOS 17对应的模拟器。
2023-11-08 10:25:58
1073
原创 插件化技术在React Native中的应用
何为「 插件化 」，顾名思义，就是把一些核心复杂依赖度高的业务模块封装成独立的插件，然后根据不同业务需求进行不同组合，动态进行替换，可对插件进行管理、更新，后期对插件也可进行版本管理等操作。
2023-04-03 14:58:48
695
原创 Sparse Checkout 在 Monorepo 工程下的应用
我们现在有越来越多的项目都是前后端分离的架构，所以在一个 Git Repo 里面同时放前后端代码是很常见的情况。不过，问题来了，如果前后端分离的很干净，若是前端人员不想要看到“后端”的原始代码，那 Git 有办法做到“部分取出”的功能吗？是的，还真的有！这篇文章我就来说说这个好用的功能。Sparse checkoutsSparse checkouts 是一个从 Git 2.25 才开始支持的功能，主要用途就是帮助你取得一个 Repo 的部分内容，大幅减少本机硬盘空间的占用，也可以帮助你更加专注在..
2022-05-26 10:26:11
641
原创 前端工程化- ReactNative整合Taro工程可行性实践方案
背景随着基因宝多业务场景化的需求，前端需要同时面临App、Web、小程序多端同步开发相同业务功能的问题。App整体架构为ReactNative，小程序及Web端使用Taro来实现。当前模式下，需要分别对Web、小程序、App进行开发，并且为了“复用”代码，小程序端与App端需要分别等待做代码转换，工作及人员重叠，时间线延长，效率极低。为了解决以上问题，提升开发效率，降低错误成本，提出在App端实现对Taro代码的编译，转换、运行，实现无缝衔接。方案Taro官方在3版本上针对RN做了.
2021-10-18 15:21:49
1602
1
原创 前端工程化-Genebox小程序端Monorepo架构改造
工具yarnworkspace+lernayarnworkspace管理依赖，lerna负责更新发布功能模块授权用户相关，登录....唾液盒绑定唾液盒切换唾液盒检测进度地址编辑下单回寄协议网页WebView相关配置路由拆包package.jsoncommitlinthuskytsconfig根据目前的项目状况，设计如下：package入口统一为index.jspackage源码入口统...
2021-09-03 10:48:34
423
原创 客户端ReactNative一键登录实现方案
背景当前App登录模式有三种： 手机号/验证码登录 人脸/指纹识别登录 第三方/其他方式登录 为提升App使用体验，助力新用户注册和老用户留存，提供更为便捷&安全的登录方式简介本机号码一键登录是基于运营商独有网关认证能力推出的账号认证产品。用户只需一键授权，即可实现以本机号码注册/登录，具有时延低、操作简单、号码验证免短验的特点，体验更优。本机号码一键登录的主要特点是以手机号码作为账号，无需验证，免密码即可登录，并且登录授权页面呈半自定义，以京东、小
2021-07-15 14:16:43
1667
原创 前端工程化-客户端代码质量检测平台
工具SonarQube+SonarScanner+Jenkins+SonarLint环境配置 使用目前最新版本9.0.0（注意看官网对应的版本先决条件） JDK需要使用11版本及以上 如果需要mySQL请下载7.8版本，7.8版本以上的不再支持mySQL数据库 SonarQube版本7.7以上不再支持项目中的sonar.analysis.mode=preview（高版本没有使用数据库默认是预览模式） 日志，有报...
2021-07-15 14:15:23
253
原创 前端工程化-小程序持续交付平台化解决方案
背景流程长且无明确规范，导致整个过程较为艰辛。下图展示了一次发版工作最基本的工作内容，其中还省略了各种通知、确认环节。可以看到，前端研发在其中承担了较多的重复工作。问题 1. 多个/多端小程序同时发版上传操作需要打开各自平台不同的开发者工具（多端情况下），后续送审、发布环节则需要在各小程序管理后台进行手工操作（重复繁琐）。开发周期紧张，发版频率高没有固定的发版周期，单个小程序每周可能会发布n次，对于前端同学来说，这可能意味着需要更频繁的在正常工作及发版任务中进行切换，...
2021-04-10 11:26:21
401
原创 前端工程化-AOP在Genebox小程序网络请求上的应用
genebox-mini-request 是基于JS Decorator 和 Taro 实现的网络请求，专注于实现对网络请求的使用优化。背景当前小程序端网络请求模块使用 request utils 统一处理，通过配置请求模块，动态生成 request task，并通过该实例发起请求。额外的 options 配置参数需要单独传入高阶函数，目前仅支持header，超时时长配置。存在的问题： 请求参数配置存在一定局限性，不易扩展 请求模版的创建增加重复性代码 请求模版配置与具体使用分离，
2020-11-04 21:01:38
321
原创 React Native 函数式组件优化实践
React 性能优化理念的主要方向简单概括为两个：减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconciliation(简单可以理解为 diff)，如果不 render，就不会 reconciliation。 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。关于类组件的渲染优化，...
2020-04-14 14:27:33
2624
原创 Git代码提交规范
随着团队不断扩大，git 的 commit 信息需要按照一定的格式规范，以便在需要的时候方便使用。提交信息可以方便的定位问题, 代码 review 的时候也知道了该次 commit 干了什么，所以 commit 标准化好处很多，不再多说实现 结合 git hook 实现在 git commit 阶段检查输入是否符合规范，符合通过，反之提示工具commitlint：用于检查提交信息,...
2020-03-04 16:44:38
1181
原创 原生端（iOS和Android）读取ReactNative本地图片
源码已上传Github：https://github.com/songxiaoliang/native-read-rn-image在ReactNative开发过程中，有时需要在原生端显示RN里的图片，这样的好处是可以通过热更新来更新APP里的图片，而不需要发布原生版本，而ReactNative里图片路径是相对路径，类似'./xxximage.png'的写法，原生端是无法解析这类路径，那么如果将...
2019-05-24 19:49:15
2906
原创 Detox实现ReactNative E2E自动化测试
Detox 是什么？在创建新功能或修复错误后，我们通常会在我们的设备上安装该应用并手动测试。但是，当我们想要在标记版本之前验证所有新旧功能时，此过程可能会很麻烦。解放双手，是我们梦寐以求的。Detox，一个用于测试 React Native 应用程序 Selenium 界面的端到端自动化测试工具。Detox 是为移动端APP打造的灰盒端到端自动化测试框架。在 ReactNat...
2019-05-16 21:41:55
2098
2
原创 React Native字体适配解决方案
源码已上传 Github:react-native-app-font“怎么又是字体，老常的话题现在还拿出来说。关于字体适配的解决方式网上一搜几十篇！”。看到标题的烙铁心里一万个xxx疾驰飞腾。But! 我总是会给大家带点什么惊喜。关于 pxToDp、启动缩放 我们一点不说。本篇博客的主题很简单：如何控制App字体不随系统字体改变？系统字体改变一般有两种情况：（1）调整系统字...
2019-05-12 22:40:51
3687
原创 React Native图片资源使用方案
图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存，GPU渲染都与PC有较大差别，所以在App应用开发中，需要我们单独分析处理。今天我们聊聊在React Native开发中，如...
2019-04-02 16:38:04
1445
原创 在 React Native 中使用 Hooks
React官方在 2018 ReactConf 大会上宣布 React v16.7.0-alpha(内测) 将引入 Hooks。什么是Hooks，我们来了解一下。什么是Hooks?在平时开发过程中，我们一般都会遇到如下问题：1. 难以重用和共享组件中的与状态相关的逻辑2. 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 state 时，每个生命周期函数中可能会包含...
2019-03-13 16:15:03
7720
3
原创 Android 集成 Flutter 及通信交互详解
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。前不久开源了用Flutter开发的一个音视频类App客户端，欢迎大家star, fork。⚠️ 项目地址：https://github.com/songxiaoliang/visitor-flutter⚠️ 本篇博客涉及的源码全部开源在Github，地址：https://github.com/songxiao...
2019-01-28 16:18:03
4778
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
13011
18
原创 Flutter以两种方式实现App主题切换
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述App主题切换已经成为了一种流行的用户体验，丰富了应用整体UI视觉效果。例如，白天夜间模式切换。实现该功能的思想其实不难，就是将涉及主题的资源文件进行全局替换更新。说到这里，我想你肯定能联想到一种设计模式：观察者模式。多种观察对象（主题资源）来观察当前主题更新的行为（被观察对象），进行主题的更新。今天和大家分...
2018-12-26 11:29:27
10298
4
原创 Flutter优化之将小部件拆分为方法将影响渲染性能
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。在React Native跨平台开发框中，我们经常会看到，当界面组件层次嵌套深，组件交互涉及业务逻辑时，为了代码层次简洁、清晰，都会将组件拆分到方法中，然后在主布局中引入，例如：render() { return ( <View style={{ flex: 1, backgroundCo...
2018-12-22 15:56:07
1910
4
原创 CodePush优化之减小更新包体积
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。述还有 10 天就要迎来 2019 新年，感慨 18 年过的好快，恍恍惚惚。2018 年经历了很多，人生最重要的事情，很开心。闲余时间浏览了这一年写过的博客，9 篇相对 17 年少了很多。时间不等人，什么事还是要提前计划往前做。本来是要等新年再和大家分享新的内容，回头看看还是以整数结尾这一年，也算欣慰。这篇博...
2018-12-19 16:21:01
1299
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
3412
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
4677
原创 React Native BackHandler exitApp 源码分析
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。概述昨天技术交流群里有个朋友提出一个问题，在 Android 中嵌入了 React Naitve，并且想从RN层执行代码，回到上一个原生Activity。说起来比较模糊，假设他的界面执行流程如下：ActivityA→ActivityB →RNActivityA→ JS端执行代码→...
2018-11-22 17:29:28
1891
原创 React Native 手势触摸事件机制详解（进阶篇）
源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。在基础篇，对RN中的触摸事件做了详细的介绍。相信大家对于触摸事件流程机制有了更为清晰的认识。没有浏览的可以先看看基础篇：《 React Native 手势触摸事件机制详解（基础篇）》本篇博客中，同样延续基础篇中结尾的内容，对触摸事件的执行流程从代码层执行流程进行更深的说明，并使用RN系统提供的...
2018-10-20 14:41:11
3987
1
原创 React Native 手势触摸事件机制详解（基础篇）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 源码已开源到Github，详细代码可以查看：《React Native 触摸事件代码实践》。 博客产出拖延了很久，老早定的主题现在才开始写。之前群里朋友对于React Native（以下简称RN）中手势触摸相关问题提出的频率很高，并且在实际开发过程中较难理解和处理。本篇内容将围绕...
2018-09-26 16:07:47
5951
原创 React Native v0.56.0 最新版本更新日志
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。React Native v0.56.0 已发布，这也是属于 6 月的更新发布！FB开发团队表示，自3月以来，超过 60 位贡献者贡献了 816 个 commit。另外，由于这个新版本有一些重要的破坏性变化需要大量的额外工作才能使其达到稳定的状态，这也是月度发布周期中跳过4月和5月的主要原因。同时官方表示，...
2018-07-05 15:07:14
2569
原创 React Native封装Android原生UI组件最详教程
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。篇幅预计阅读时间10分钟，结尾有福利~~ 前些天群里有朋友说想了解如何在React Native项目中使用封装原生View组件，之前有写过一篇Android原生层与React Native 交互的文章，感兴趣的朋友可以看一下。今天要分享的如何封装原生View组件在React Native项目中...
2018-04-17 18:16:58
8330
3
原创 React Native未来导航库：react-navigation 使用详解（进阶篇）
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。本篇内容为react-navigation的进阶内容以及高级用法。基础篇请看：React Native未来导航者：react-navigation 使用详解（基础篇）（1）适配顶部导航栏标题： 测试中发现，在iphone上标题栏的标题为居中状态，而在Android上则是居左对齐。所以需要我们修改源码，...
2018-03-06 17:44:25
4406
4
实现下拉式窗帘动画和上拉式抽屉Android动画
2016-04-16
children在react中的应用.key
2019-12-16
React Native Modal
2017-09-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人