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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

早在 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 的未来更加光明。随着原生工具变得更易于使用,我们可以构建看起来和感觉都属于其平台的应用程序。

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

以上就是我的 Web 开发思维方式如何让我在 React Native 中误入歧途的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2646357.html

(0)
上一篇 2025年3月7日 07:45:47
下一篇 2025年2月25日 21:45:54

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 掌握 HTML:从基础到中级

    掌握 html:从基础到中级 html(超文本标记语言)是每个网站的支柱,也是任何进入 web 开发的人的基本技能。它允许开发人员在网络上构建内容,使其成为创建用户友好、具有视觉吸引力的网站的重要工具。在本文中,我们将探索从 html 基础…

    2025年3月7日
    200
  • 了解版本控制在 NPM packagejson 中的工作原理

    了解 npm 版本控制:综合指南 管理依赖项是任何现代开发工作流程的重要组成部分,尤其是在基于 javascript 的项目中。 npm(节点包管理器)简化了这个过程,但了解其版本控制系统是维护应用程序稳定和安全的关键。 在本博客中,我们将…

    2025年3月7日
    200
  • React v 稳定版本和新增功能

    react 19 正式登陆,带来了大量新功能和增强功能,可简化开发并提高应用程序性能。从改进的状态管理到更好的服务器端集成,react 19 适合每个人。 react 19 的主要特性: 1.简化异步状态管理的操作 管理 api 请求等异步…

    2025年3月7日
    200
  • 使用 css 和 html5 对按钮动画幻觉的霓虹灯效果

    illusionistic 3d neon button click me 登录后复制 * { margin: 0; padding: 0; box-sizing: border-box;}body { height: 100vh; dis…

    2025年3月7日
    200
  • 现代Web开发中卡片的设计与实现

    卡片是现代网页设计中最通用的组件之一。它们用于以简洁且具有视觉吸引力的方式呈现信息,从在线商店中的产品到博客上的文章。在本指南中,我们将探索不同的实现和最佳实践。 卡片剖析 一张典型的卡片由几个元素组成: @@##@@ título de …

    2025年3月7日 编程技术
    200
  • typescript4.2

    TypeScript 4.2 引入了以下主要新特性:改进了模板字符串类型推断,允许开发人员直接使用表达式并推断其类型。添加了对全局异常处理的支持,使开发人员能够在应用程序顶层捕获未处理的异常。扩展了 JSX 中 CSS 属性的支持,允许开发…

    2025年3月7日
    200
  • Javascript 中的单一职责原则

    理解 javascript 中的单一职责原则在编写干净、可维护的代码时,要遵循的最重要的原则之一是单一职责原则(srp)。这是软件开发中的五个 solid 原则之一,可确保您的代码更易于阅读、测试和修改。 什么是单一责任原则? 罗伯特·c.…

    2025年3月7日
    200
  • 关于useEffect错误用法的推理

    React 中最错误使用的 hook 无疑是 useEffect。我们这样做有多种原因,而不仅仅是一个。让我们从我的角度来探讨其中的每一个。 生命周期遗产 所以我认为影响更大的原因之一是,在前钩子时代,我们使用了类。对于这一时期开始使用Re…

    2025年3月7日
    200
  • 使用 html css 和 javascript 的计算器 ui 的未来

    Neon Glass Calculator *{ box-sizing: border-box; margin: 0; padding: 0; } body{ font-family: “Poppins”,sans-serif; backg…

    2025年3月7日
    200
  • 准备前端项目以进行实时部署

    准备前端项目以进行实时部署 部署前端项目不仅仅是将文件上传到服务器。需要仔细规划、优化并充分了解托管环境,才能确保您的网站或应用程序快速、轻量级且可靠。在本文中,我们将介绍准备前端项目进行实时部署的关键步骤。我们将重点关注优化代码、管理资产…

    2025年3月7日
    200

发表回复

登录后才能评论