从React转向React Native我学到的7件事。初学者手册

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

两件事定义了你：当你一无所有时的耐心和当你拥有一切时的态度。— George Bernard Shaw

React和React Native是两种强大的技术，它们彻底改变了我们构建Web和移动应用用户界面的方式。

React 🔮 因其灵活性和易用性而广受欢迎。另一个原因是一旦你掌握了React，你就可以处理React Native。它使开发者能够使用相同的JavaScript实践创建原生移动应用。在大多数情况下，甚至可以使用相同的代码。

虽然Web和移动之间代码共享的前景听起来令人兴奋，但从React转向React Native并非没有挑战。

在本文中，我们将探讨我（可能你也）在转换过程中遇到的瓶颈，并提供如何克服它们的见解❤️。

RN开发的要点

所以这里的第一步是意识到你的知识、技能，最重要的是当前环境不足以运行RN项目。

要在你的MacBook/Windows/Linux上运行React Native项目，你需要设置一个包含几个高级软件工具和依赖项的开发环境。

以下是你应该预先安装的列表：

— Xcode（用于iOS开发）。如果你计划在iOS设备或模拟器上开发和测试你的React Native应用，你需要从Mac App Store安装Xcode。它包括iOS SDK和iOS开发所需的工具。从Xcode运行应用是必要的，因为它将提供对日志记录和调试所需的基本原生模块的访问。

— Android Studio（用于Android开发）。对于Android开发，你需要安装Android Studio，它包括Android SDK、模拟器和其他开发工具。你可以从官方网站下载它。故事与Xcode非常相似 — 日志记录和调试。

— Java开发工具包（JDK）。React Native依赖Java开发工具包（JDK）来构建和运行Android应用。你可以从Oracle网站下载并安装JDK，或使用OpenJDK。这是真正需要安装的东西。

— CocoaPods（用于iOS）。如果你的React Native项目使用任何原生iOS模块（99%可能使用），你需要CocoaPods来管理iOS项目依赖。你可以在Ruby之上使用以下命令安装CocoaPods — sudo gem install cocoapods。

— Android虚拟设备（AVD）或物理Android设备。要在Android上测试你的React Native应用，你可以使用Android Studio设置Android虚拟设备（AVD）或将物理Android设备连接到你的MacBook。这是你可以从互联网上学习的东西，所以我不会在这里停下来。

基于文件夹的结构增强

React Native项目架构可能看起来像一个普通的Create React App，但表面上它有更多未知的东西需要深入研究。

虽然没有一种适合所有React Native的架构，但以下元素通常是典型React Native项目架构的一部分：iOS和Android文件夹。通过调查和学习它们如何工作，你会真正理解一切是如何在底层运作的。

• Android — app/android文件夹包含你的React Native应用的所有Android特定代码和配置。这包括Gradle构建文件（build.gradle），用于应用配置的 AndroidManifest.xml，以及Android 特定功能的 Java/Kotlin 代码。
• iOS — app/ios 文件夹包含你的React Native应用的所有iOS特定代码和配置。它包括Xcode项目文件（.xcodeproj）和iOS特定功能的 Swift/Objective-C 代码。

这两个文件夹将永远与你的源代码（在app/src中）并列存在。所以不要犹豫，去探索它们并学习它们如何工作。它们是你的原生应用的源头。应用将使用那里的文件运行，而不是src中的文件。

编写原生组件

这是一个非常关键的部分。React Native允许开发者使用React语法编写组件，但并非所有React组件都可以直接转移到 React Native。

React Native使用原生UI组件，这意味着你需要用移动端等价物替换一些特定于Web的组件。例如，HTML元素如 <div> 或 <span> 需要分别用React Native的 <View> 和 <Text> 组件替换。

另一件可能会让你措手不及的事情可能是不遵循W3C规范的习惯😶。在Web上，在 <div> 中写文本而不是常规的<span> 或 <p> 不会搞砸任何东西，除了SEO（当然，如果你的营销人员依赖它）。然而，如果你想编写RN，你必须知道以下内容：

当你需要对齐某些东西时使用 <View />，例如制作一个容器。如果你需要在某个容器内放置一些文本，使用 <Text /> 💡。

这种转换可能会耗费时间，特别是当你处理复杂的UI元素时。

样式和布局挑战

React Native 中的样式与 Web 开发有些不同。虽然React利用CSS进行样式设计，但React Native使用JavaScript和一种称为Flexbox的类CSS样式系统的组合。

建议：投入时间学习React Native中的Flexbox布局设计。熟悉React Native特定的样式属性和布局规则。

你在编写CSS时不会遇到太多麻烦，但有时你可能会发现它的工作方式不同。例如，width: inherit属性不会起作用。你应该为父元素和子元素明确设置相同的值。

另一个例子是box-shadow: insert，这也缺乏可比性，将迫使你找到另一种写阴影的方式。

最后但同样重要的是 — 你不能为基于<Text>的元素设置容器类（背景/边框等）属性。你总是需要将<Text>中的文本包装在<View> 中，以便能够管理外部样式。

此外，使用第三方库如 Styled-components或 StyleSheet 来简化样式任务并保持跨平台的一致性。

导航和路由

React Router是处理React Web应用路由的流行库。然而，在React Native中，你需要采用不同的方法。

我个人发现这里的主要障碍是你有一个称为Stacks的东西。Stacks基本上是一种路由模式，它在其子路由中封装不同的高级路由。

听起来不清楚吗？确实如此。我们探讨一下。Web提供了一个线性历史，我们可以在导航时弹出/推入等。在RN中，你无法从一个堆栈访问另一个堆栈而不丢失历史链。这是一种常见模式，可能是有原因的。所以明智地创建你的堆栈。在这里了解更多。

React Native提供了各种导航库，如React Navigation、React Native Navigation等，每个都有自己的学习曲线。

我的个人意见是坚持使用最流行的一个 — https://www.npmjs.com/package/@react-navigation/native

性能和优化

与桌面浏览器相比，移动设备资源有限，这使得性能优化对React Native应用至关重要。

一旦你登陆React Native项目，即使是小的 console.log() 更改也会变得相当棘手。默认情况下，RN在Metro或Expo提供程序之上运行。它们都提供内置日志记录，但最终可能不足以进行精细调试。

高级方法是利用Chrome控制台面板进行静态应用日志记录，使用Reactotron进行API/网络调试💡。

上面的建议是React Native日常工作的一部分。所以在开始开发之前，学习这两个工具，因为它们可能会提前为你节省大量时间。

原生代码的平台特性（iOS/Android）

React Native有一个不断增长的第三方库生态系统，但并非所有React库都兼容。这在从React转向React Native时可能是一个主要瓶颈。

此外，安装原生模块（例如，npm模块，但针对iOS/Android）也可能是需要学习的新东西。

我们都习惯了npm install。然而，对于RN开发来说这是不够的。特别是如果你需要强制你的原生应用访问其原生服务（例如VoIP/相机/麦克风等）。

当然，你可以从NPM安装任何你需要的东西，并在普通的JS/TS代码库中使用它。然而，有时你需要至少对ObjectC/C++/Swift/Kotlin如何运作有基本的理解，以便协调上述任何服务。

例如，为了启用VoIP功能，你需要修改 AppDelegate.mm 和 Podfile（对于iOS）。对于Android，它们分别是 MainActivity.java 和 build.gradle。这四个是你在RN生态系统中代码库的入口点。

每次你想添加特定于平台的东西或访问原生服务时，你都会修改这些文件。

总结

从React转向React Native可能是一个具有挑战性但回报丰厚的旅程。它并不像你可能认为的那么容易，但一旦你掌握了React本身，它绝对是你应该关注的东西。

通过理解和解决上述瓶颈，你可以成功地完成转换，利用原生代码的优势，并将自己视为多平台工程师。

请记住，学习和适应新的范式和工具是软件开发的基本方面，通过耐心和实践，你可以在React和React Native中都变得熟练。

结论

通过遵循这些步骤，你可以在React Native应用中实现滚动到特定章节，从而增强用户体验。这种方法可以根据需要适应更复杂的UI和额外功能。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。