SkioFox Blog

Thinking will not overcome fear but action will.

React Native 技术详解 (十) - APP打包和热更新自动化

React Native 技术详解 (十) - APP打包和热更新自动化

背景 为了提高APP开发过程的整体效率，摆脱开发人员手动依赖，因此需要搭建一套能支持APP自动打包构建和热更新推送的可视化工具，简化打包和热更新过程，并实现打包以及热更新的自动化。 整体要功能实现需分为以下三步： 打包和热更新自动化平台搭建 私有化App的打包 IOS和Android端的打包自动化 打包和热更新自动化平台搭建 前面我们已经详细讲过code-push更...

Posted by SkioFox on July 30, 2022

React Native 技术详解 (九) - 私有化多APP打包方案

React Native 技术详解 (九) - 私有化多APP打包方案

背景 由于公司的项目需要，越来越多的客户有私有化需求，私有化的App有定制化icon、启动图、上架等需求。因此需要将React Native项目的APP打包成不同的App已满足客户的私有化需求，这里记录下方案实现过程。 这里我们的主要需要解决的问题是： 打包过程资源每次的重复替换(如icon、启动页、证书、描述文件、签名等) 目前的单APP状态，私有化的原生端改动都是一次性的...

Posted by SkioFox on July 15, 2022

React Native 技术详解 (八) - 集成Code-push热更新

React Native 技术详解 (八) - 集成Code-push热更新

React Native 的热更新支持是其能作为被广泛使用的技术重要原因。 它能绕过应用市场审核，实现快速多次迭代和问题修复。更准确得说是 JavaScript 能够被 Android 和 iOS 的动态执行的支持，所以才会产生替换执行代码的热更新技术。 下面将基于 Code Push 来阐述其热更新设计，目前微软已经将其统一个到 App center 中来实现多端的更新管理。而对于我们...

Posted by SkioFox on June 30, 2022

React Native 技术详解 (七) - Android打包发布

React Native 技术详解 (七) -Android打包发布

用React Native开发好APP之后，如何将APP发布以供用户使用呢？一款APP的发布流程无外乎：签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Native APP。 打包 众所周知，Android要求所有的APP都需要进行数字签名后，才能够被安装到相应的设备上。签名打包一个Android APP已经是每一位Android开发者的家常便...

Posted by SkioFox on June 5, 2022

React Native-IOS打包发布

React Native-IOS打包发布

用React Native开发好APP之后，如何将APP发布以供用户使用呢？一款APP的发布流程无外乎：签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Native APP。 在本文中我将为大家讲解如何打包和发布React Native iOS App。 第一步：导出js bundle包和图片资源 和打包React Native Androi...

Posted by SkioFox on April 28, 2022

React Native 技术详解 (五) - 拆包 (Code Splitting)

React Native 技术详解 (五) - 拆包 (Code Splitting)

简介 拆包 (分包) 的实质是进行代码分割 (code splitting)，即把代码分割成多个 bundle 文件，在我们熟知的许多前端编译构建工具中都有实现代码分割的功能。 例如：Webpack 允许开发者通过动 import() 语法来支持模块级别的代码分割，可以实现动态模块加载功能。也支持通过 SplitChunksPlugin 插件支持块级 (chunk) 的编译时代码分割。他...

Posted by SkioFox on March 18, 2022

React Native 技术详解 (四) - 调试工具 Flipper

React Native 技术详解 (四) - 调试工具 Flipper

介绍 Flipper 是 Facebook 提供的一个移动端调试工具，它支持 iOS、Android、React Native，并提供桌面端 GUI 调试界面。 Flipper 是开箱即用的，提供了包括：网络、布局和属性样式、持久化存储展示、日志、Hermes Debugger 等非常有用的分析功能，这些功能都以插件形式提供。 Flippr 由两部分组成： 桌面端应用程序。 ...

Posted by SkioFox on March 1, 2022

React Native 技术详解 (三) - 打包工具 Metro Bundler

React Native 技术详解 (三) - 打包工具 Metro Bundler

Metro 介绍 Metro Bundler是构建 jsbundle 包及提供开发服务的工具，默认被集成在 react-native 命令行工具内，你可以在这里 找到其开发服务集成源码。 react-native 命令行工具源码是由 Lerna 管理的 monorepo 仓库，每个子命令在单独的子包里。而 React Native 的打包由其 cli-plugin-metro 子包管理。...

Posted by SkioFox on February 19, 2022

React Native 技术详解 (二) - 新架构

React Native 技术详解 (二) - 新架构

在上文React Native整体介绍中，我们知道 React Native 以前的架构图如下： React Native 以 React 技术为开发基础，通过 Metro 捆绑器打包成最终目标代码文件 JSBundle。JSBundle 运行在 JavaScriptCore 执行引擎，通过 Bridge 传递布局及相关渲染数据。最后，由 Yoga 进行与 Native UI 模块管理...

Posted by SkioFox on February 3, 2022

React Native 技术详解 (一)

React Native整体介绍与理解

简介 React Native 是由 Facebook (已改名：Meta) 创建的一种实现跨端的技术。与 Cordova (前身：PhoneGap) 或ionic 这种在 Webview 中嵌套网页 App 的跨端技术不同。React Native 最终提供给用户的视图是原生视图，这让用户能体验到原生应用的感觉。 App 使用网页方式，有可能因为应用执行速度慢或使用不够“原生”而...

Posted by SkioFox on January 12, 2022

FEATURED TAGS
数据结构 javascript 队列 媒体查询 Git http rem ES6 css Node 模块化 webpack vue 组件 组件通信 axios 路由 全局数据 算法 原理 proxy react React 组件化 Redux react-redux 设计模式 Vue 性能优化 Jest 插件 npm React Native 打包 热更新 微前端 容器化 IOS TypeScript microApp
ABOUT ME

stay hungry stay foolish

✉️ skiofox@126.com

FRIENDS