你

你不是 React Native 菜鸟

2025-06-07

你不是 React Native 菜鸟

常见的 React Native 陷阱和概念将在开发之前和开发过程中为您提供帮助✨

React Native 让你可以使用与 React 相同的知识库，进行原生移动应用开发。这真的很有趣 🐼

如果你是一名 React 开发者，并且了解一些原生开发基础知识，例如 iOS 🍎 或 Android 🤖，那么你就能轻松上手 React Native，也就是说你不是菜鸟🙈。不过，这并非一对一的关系。我最初学习 React Native 时，甚至忘记了我的原生开发技能是如何轻松迁移的。

以下是作为 React Native 开发人员会遇到的 React Native 信息和陷阱的列表：

整合项目 — Expo vs React Native cli ✨

有两种主要方法可以整合 React-native 项目：

  1. 世博会
  2. React Native cli。

Expo本质上是一个开源项目，专为新手打造，使用 Expo API 帮助他们快速构建 React Native 应用并创建原型。您可以使用 create-react-native-app 来开始使用 Expo。它使您的项目完全由 JavaScript 编写，您无需深入研究原生代码。

准备好将其发布到应用商店/Play Store后，你基本上可以“弹出”它，这会生成iOS和Android的软件包/文件夹。（不弹出就无法发布）。在此过程中，某些内容在转换为原生代码时可能会出现问题。我不确定你的情况，但这让我很不确定。我不喜欢¯_(ツ)_/¯上有很多魔法。通常很难调试它的根本原因。

➕您应该在完成每个故事/任务后构建项目并在设备上进行验证。

我建议新手使用 Expo，这样你就可以了解一切是如何运作的，尽管在与客户合作时这有风险，因为当出现问题时调试会变得更加困难。

对于 React-Native cli，您可以使用 react-native-cli init 创建一个全栈项目。它会从一开始就在您的项目中生成 Android 🤖 和 iOS 🍎 文件夹和文件 📁，这为开发者提供了极大的可视性。由于项目文件夹是默认生成的，因此无需弹出步骤。只要您的环境符合最新要求，您就可以立即构建并在设备上运行。除非您做了一些疯狂的事情，否则这应该没问题。✨

布局组件💄

你可以使用Flexbox风格在页面上布局组件。如果你还不了解 Flexbox，这里有一个很棒的🔗链接可以学习。React-native 也提供了原生特有的组件，例如 Text、View 等。你通常将组件包装在 View 中，因为 View 的设计初衷是嵌套在其他视图中，并且可以包含 0 到多个任意类型的子视图。

➕ 提示 ：请记住，您正在为不同的设备构建。因此，请尽量不要硬编码过多的值，因为top: 5不同尺寸的设备会有不同的定位。

手机可以旋转，如果这是你的应用的要求，那么在编写 CSS 时你需要同时考虑纵向和横向模式。💄

我还建议使用Styled-components 💅 来获得更多的设计系统。

你不是在为浏览器🕸编写代码🙅

即使感觉如此，你也不是在为浏览器🕸编写代码，请始终牢记这一点。在进行 Web 开发时，浏览器会提供window对象，你可以轻松访问setTimeout 🕐 等方法，但没有原生的等效方法，你无法预知发生了什么。

现在，这甚至可能在调试版本中起作用，因为您可能设置了热重载，因此浏览器可能会注入，并且看起来好像可以正常工作。但是，由于无法访问许多常见的 Web API，因此在发布版本中无法正常工作。🕸️

很多 npm 包📦在编写时都会考虑到 Web 特性，但这可能行不通，所以在为你的项目选择包之前一定要小心谨慎。同时，查看它们的依赖关系，确保一切顺利。大多数库都提供了很好的文档，谷歌一下就能找到，所以先看看文档吧！💯

异步存储🗑️

Android 🤖 和 iOS 🍎 均具有等效存储，因此您可以在设备上存储数据，当您卸载应用程序时，这些数据会被删除。

React Native 提供了一个非常有用的 API，叫做 Async Storage，它在两个平台上都能很好地完成存储工作。就像在浏览器中使用本地存储 API 一样，你可以以相同的方式使用 AsyncStorage。

在 iOS 上， AsyncStorage 由原生代码支持，该代码将小值存储在序列化字典中，将大值存储在单独的文件中。在 Android 上，AsyncStorage 将根据实际情况使用 RocksDB 或 SQLite。

用户故事示例，

作为用户💁，我希望登录一次后即使关闭应用程序也能保持登录状态

在这种情况下，您可能希望使用异步存储。当用户使用登录按钮登录时，存储用户信息或令牌，以便下次他们回来时检查令牌是否存在且未过期，并相应地向他们显示主屏幕或登录屏幕，这样他们就无需重新登录。

异步等待🕐

请记住，这是一个原生应用。有一个 UI 线程负责响应用户的手势。现在有了 async await，程序可以在异步任务执行期间运行其他代码，例如手势响应器和渲染方法。因此，通过使用 async await🕐，您可以并发运行代码🎉，例如：

const storeUserInfo = async (token) => {
    try {
      await AsyncStorage.setItem("userToken", token);
    } catch (error) {
      console.log(error);
    }
};
Enter fullscreen mode Exit fullscreen mode

不要以为你不会打开 Xcode 🍎 或 Android Studio 🤖

作为一名 React Native 开发者，你很可能永远都无法打开 Android Studio（Android IDE）和 Xcode（iOS IDE）。你越熟悉，就越容易上手。

用户故事示例：

作为用户👩，我希望应用程序不旋转，以便获得更好的用户体验

从开发者的角度来看，这意味着您希望将设备方向锁定为仅纵向模式。每个平台都有此设置。对于 Android 平台，您需要在 androidManifest.xml 中进行更改；对于 iOS 平台，您需要在复选框中进行设置。

iOS 锁定方向配置

🍎 https://stackoverflow.com/a/32177887/188130 9

🤖 https://stackoverflow.com/a/44485271/1881309

➕提示：请务必在 Google 搜索中添加“React Native”，这将帮助您获得更好的搜索结果。💯

资产📷

资源指的是你的图片、音频和视频文件，但最常见的场景还是图片。我实在想不出哪个应用没有图片🤷。

用户故事示例：

作为用户👵，我想在登录后台看到公司的logo

由于我们针对的是 iOS 🍎 和 Android 🤖 这两个不同的设备，每个设备的分辨率都不同，因此我的建议是提供 2 倍或 3 倍的图片。React Native 可以根据不同的屏幕密度自动选择合适的图片，这一点做得很好。

company-logo.png
company-logo@2x.png
company-logo@3x.png
Enter fullscreen mode Exit fullscreen mode

例如，在 iPhone 7 上将使用company-logo@2x.png ，而在 iPhone 7 Plus 或 Nexus 5 上将使用company-logo@3x.png。如果没有与屏幕密度匹配的图像，则将选择最接近的最佳选项。

通过采用这种方法，您的应用程序将看起来很漂亮💄并且不会出现像素化。

导航

导航示例（iOS）

React Native 有大量用于 React 导航的库。其中最受欢迎的一个是react-native-navigation。

虽然这个库很棒，而且有很多⭐。但我发现它并不适合初学者，因为它需要一些原生应用特定的设置。我个人虽然有原生开发经验，但设置起来还是很费劲。对于 JS 开发者来说，它的学习曲线也很陡峭，因此我推荐使用https://reactnavigation.org/。我只花了 5 分钟⏲ 就上手了这个库，而且非常容易上手。

调试版本与发布版本 🚀

调试版本主要用于开发，而发布版本则用于生产环境，例如 App Store 🍎 和 Play Store 🤖 部署。在开发过程中，您将运行调试版本，其中包含热重载🔥和远程调试功能。当您需要在设备上测试时，则需要发布版本。

当您想在非开发环境中的设备上运行应用程序时，您需要运行以下命令为您生成发布版本让我们看一个 iOS 示例：

node node\_modules/react-native/local-cli/cli.js run-ios --configuration=Release
Enter fullscreen mode Exit fullscreen mode

App 生命周期与组件生命周期如何对应

React 组件的生命周期🚲与 Android 中的 Activity 生命周期或 iOS 中的 Screen 生命周期完全对应。正如你通常构建 React 应用一样，你也会对 React Native 进行同样的操作，例如在组件渲染之前通过 componentDidMount 获取数据等等。

但是，你怎么知道应用是在后台还是前台呢（这非常原生）？你可以从 react-native 获取 AppState，它本身就包含事件监听器，你可以在应用进入前台还是后台时监听它。以下是一些示例代码：

import { AppState } from 'react-native';

class App extends Component {
  componentDidMount(): void {
    AppState.addEventListener("change", this.\_handleAppStateChange);
  }

  componentWillUnmount(): void {
    AppState.addEventListener("change", this.\_handleAppStateChange);
  }

// state can be active for foreground and inactive when transitioning between background and foreground
  \_handleAppStateChange = (nextAppState) => {     
    if (nextAppState === 'background') {      
       console.log('App is in background!')     
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

希望这篇文章对你有所帮助💯，它能让你更好地理解 React Native 的工作原理以及它与原生开发的对应关系。🙌

如果您喜欢它🙏，请给它一些👏，并在评论中分享您的 React-native 体验🙌

文章来源：https://dev.to/kulkarniankita9/you-are-not-a-react-native-noob-55ik
Devto 翻译
PREV
6 个超棒的 JavaScript 代码片段，值得一读，值得学习！🔥 网上还有更多！
NEXT
Nestjs🐺⚡ | Nodejs 框架（下）| 模块、循环依赖、Guard