Skip to main content

10 posts tagged with "react native"

View All Tags

🤯 These React Native Pitfalls Only Come with 2+ Years of Development Experience

· 11 min read
卤代烃
微信公众号@卤代烃实验室

When developing with React Native, if you're just writing some simple pages, you can basically write them following the official documentation reactnative.dev. However, React Native has hundreds of APIs. Without certain development experience and pitfall-hitting experience, you really can't grasp the key points when facing new requirements.

This article summarizes the problems I encountered in personal React Native development and some less common APIs. If someone happens to see this article and solves actual problems with it, that would be great.

⚡️ React Native Startup Speed Optimization - Native Chapter (Including Source Code Analysis)

· 21 min read
卤代烃
微信公众号@卤代烃实验室

Web development has a classic question: "What happens from entering a URL to page rendering in the browser?"

According to my research, this question has at least ten years of history. In the ever-changing, hard-to-learn frontend circle, this question continues to be asked because it's a very good question involving many knowledge points. When doing some performance optimization, you can start from this question, analyze performance bottlenecks, and then optimize accordingly.

But today we're not talking about Web performance optimization. Just borrowing the analysis approach of that classic question, from React Native startup to the first page render completion, combining React Native source code and the new 1.0 architecture, explore React Native's startup performance optimization path.

🤔 移动端 JS 引擎哪家强?美国硅谷找......

· 30 min read
卤代烃
微信公众号@卤代烃实验室

mobile_JSVM_Header.jpg

在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的。但是市场瞬息万变,Native 语言在开发效率上存在一定不足,并且从 APP 版本更新应用市场审核发布 再到 用户下载更新,总会存在一定的时间差,这样就导致新的功能无法及时覆盖全量用户。

为了解决这个问题,开发者们一般会在项目里引入一门脚本语言,提速 APP 的研发流程。在移动端应用比较广泛的脚本语言有 Lua 和 JavaScript,前者在游戏领域用的比较多,后者在应用领域用的比较多。本篇文章主要是想探讨一下移动双端(iOS & Android)的 JavaScript 引擎选型。由于个人水平有限,文章总会有遗漏和不足的地方,还请各位大佬多多指教。

🙈 How to Hide Your Hot Update Bundle Files?

· 15 min read
卤代烃
微信公众号@卤代烃实验室

A while ago, a senior person at our company learned through some channels that a certain national-level APP was rejected for three months because Apple App Store reviewers detected React Native hot update content. Our hot update platform has similar principles to the problematic APP, so we also face the risk of rejection. Therefore, we need to think of some ways to hide the hot update bundle and avoid being discovered by reviewers.

Actually, this problem is quite complex because it's not purely a technical issue but also involves various complex commercial interests. Under many constraints, it's difficult to find an optimal solution. Moreover, this issue is quite sensitive, so I can only briefly outline my thinking process. This article will not provide specific code implementations.

Serious declaration: If anyone hides hot update data according to the ideas in this article and the application gets rejected or removed, I will not be responsible.

🧭 React Native Version Upgrade Guide

· One min read
卤代烃
微信公众号@卤代烃实验室

React Native as a cross-platform framework has one of the most headache-inducing problems: version updates. Especially when encountering major version updates, the configuration and build files for JavaScript, iOS, and Android all undergo significant changes. Sometimes these configuration files are coupled together, where one change affects everything.

🚀 React Native Version Upgrade Guide

· 24 min read
卤代烃
微信公众号@卤代烃实验室

Preface

React Native, as a cross-platform framework, has one of the most headache-inducing problems: version updates. Especially when encountering major version updates, the configuration and build files for JavaScript, iOS, and Android all undergo significant changes. Sometimes these configuration files are coupled together, where one change affects everything.

This article assumes that the person leading the React Native upgrade is a frontend developer who is familiar with JavaScript-based frontend build processes. If conditions permit, it's strongly recommended to involve iOS and Android developers during the upgrade. For some trivial upgrade details, face-to-face communication is far more efficient than search engines.

Tip: Because each modification and new content will hide the article for re-review, it's recommended to read the original blog post for the best reading experience

👉 Read Original Blog Post

If you find this article useful, please remember to like it 🌟. Thank you, it really means a lot to me!

🎨 React Native Performance Optimization Guide - Rendering Chapter

· 38 min read
卤代烃
微信公众号@卤代烃实验室

Update Notice

Article updated on 2022-08-29 with "Image" optimization content

Article updated on 2022-01-22 with "Fabric" architecture chapter

Article updated on 2021-07-01 with Redux optimization content

Talking about React Native in 2020, in the ever-changing frontend circle, might be considered quite alternative. Before writing this article, I hesitated, but then I thought that writing technical articles isn't about following trends - writing about whatever is trendy. So I decided to write this React Native performance optimization article.

The React Native performance optimizations discussed in this article haven't reached the level of modifying React Native source code, so they are highly universal and useful for most RN developers.

📣 React Native Jump to App Push Settings and Get Push Status

· 5 min read
卤代烃
微信公众号@卤代烃实验室

To improve push notification delivery rates, the product team proposed a requirement: display a small tip when app push notifications are disabled, and clicking the tip should jump to the app's notification settings interface.

Our app is built with React Native, and Facebook doesn't officially provide these features, so we need to develop corresponding native modules.