0

0

我的 Web 开发思维方式如何让我在 React Native 中误入歧途

心靈之曲

心靈之曲

发布时间:2024-12-06 08:12:32

|

469人浏览过

|

来源于dev.to

转载

我的 web 开发思维方式如何让我在 react native 中误入歧途

当我构建第一个 React Native 应用程序时,我之前有一些 Web 开发经验。在 iOS 和 Android 上使用 React 似乎是我技能的自然延伸。

但我很快发现——这是一个艰难的过程——网络开发人员的思维方式并不总是能很好地转化为原生应用程序开发。

以导航为例。在网络上,每个网站通常都会制作自己独特的页面布局。页眉、侧边栏和页脚都是定制的。您可能从一个简单的元素开始,但它只是一个空白画布。您必须使用 JavaScript 和 CSS 来使其具有功能性和视觉吸引力。

这种定制成为您品牌标识的一部分。如果您的标题看起来像另一个网站的标题,那就感觉很普通。

当我转向本机应用程序开发时,我也带着同样的心态。

我为一切精心设计了自定义组件。我用后退按钮和标题构建了自己的标题。我创建了自定义屏幕转换和动画。我什至自己管理安全区域并跟踪屏幕方向以动画过渡。我精心制作了自定义底部选项卡 - 任何确保我的应用程序看起来与其他人的不同的东西。

没过多久就意识到这是一个错误。

本机应用程序用户期望跨应用程序保持一致的模式。他们对导航等基本 UI 元素的质量也抱有很高的期望。例如,在 iOS 上,用户希望长按后退按钮以返回多个屏幕。如果缺少这一点,体验就会感觉不完整。

那么为什么要重新发明轮子呢?本机组件已经针对该平台进行了优化。我可以简单地使用本机并调整其颜色,而不是从头开始构建自定义标头。更好的是,我可以完全跳过自定义并直接使用 UIKit 组件。用户不会感觉“基本”,而是会欣赏该应用程序如何自然地融入 iOS 生态系统。

以 Apollo for Reddit 等应用程序的成功为例。人们喜欢它,因为它采用了 iOS 的原生设计语言,让人感觉像是该平台的自然扩展。

这与 Web 开发形成鲜明对比。在网络上,您从空白画布开始,自己构建一切。开箱即用的基元通常笨重且没有吸引力。按钮是灰色的。输入具有粗糙的轮廓。您甚至需要重置 CSS 才能获得一致的基线。

Web UI 库的存在就是为了缓解这些挫败感,但它们是一个拼凑的解决方案。相比之下,像 iOS 这样的原生平台具有凝聚力强、制作精美的设计原语。导航、动画、菜单、版式、颜色和图标均由专家精心设计,以创造无缝的用户体验。这些不仅仅是工具——它们是经过数十年完善而形成的设计系统。

Grammarly
Grammarly

Grammarly是一款在线语法纠正和校对工具,伟大的AI辅助写作工具

下载

我花了太长时间才意识到这一点。一开始我什至都懒得去读苹果的人机界面指南。

早在 2019 年,React Native 应用程序常常让人感觉像是对原生应用程序的高质量模仿。他们看起来很像,但并没有完全感觉到。 React Native 的理念一直是匹配底层平台,但在实践中,许多库依赖于基于 JavaScript 的组件来模仿本机组件,而不是使用真实的组件。

例如,Android 上的 React Native 应用程序经常使用 Material Design 标头,但它们是用 JavaScript 实现的,而不是利用实际的本机标头组件。

作为一名 Web 开发人员,我发现这种抽象很有吸引力。它让我可以完全控制定制。但这种方法常常会导致微妙的不一致,从而降低用户体验。

React Native 开发者并不完全是罪魁祸首。当时,使用本机代码很麻烦,尤其是在使用 Expo 的情况下。添加本机功能通常需要放弃 Expo 并重新配置整个堆栈。具有本机代码的库经常与 React Native 更新不同步,使开发人员不得不处理他们不完全理解的 Objective-C 或 Java 文件。

“基于 JS”甚至成为库的一个卖点,向开发人员承诺他们不必处理原生依赖关系。

JavaScript 和本机代码之间的这种分歧强化了我的网络优先心态。为什么不坚持使用 JavaScript 来完成所有事情?

值得庆幸的是,React Native 生态系统已经发展。如今,您可以使用 Swift 和 Kotlin 编写原生模块,而配置要少得多。更好的是,Expo 现在支持本机代码。这些改进使得原生优先开发变得更容易,鼓励库接受原生原语。

例如,React Navigation 已转向使用本机组件,优先考虑无缝的用户体验而不是广泛的开发人员定制。

这一转变标志着 React Native 的未来更加光明。随着原生工具变得更易于使用,我们可以构建看起来和感觉都属于其平台的应用程序。

所以,从我的错误中吸取教训。使用该平台的工具并接受其设计理念。最重要的是,在决定打破规则之前先掌握规则。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

221

2026.03.03

Kotlin协程编程与Spring Boot集成实践
Kotlin协程编程与Spring Boot集成实践

本专题围绕 Kotlin 协程机制展开,深入讲解挂起函数、协程作用域、结构化并发与异常处理机制,并结合 Spring Boot 展示协程在后端开发中的实际应用。内容涵盖异步接口设计、数据库调用优化、线程资源管理以及性能调优策略,帮助开发者构建更加简洁高效的 Kotlin 后端服务架构。

121

2026.02.12

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

443

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

605

2023.08.10

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

443

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

605

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

22

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 41.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号