Android开发者React Native指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

想从 Android 开发转型到 React Native 开发吗？希望这篇指南能帮助你顺利地从 Android 开发背景过渡到 React Native 开发。别担心，我不会告诉任何人你在尝试“另一面”，你的秘密我绝对保密！😉

从 Android 过渡到 React Native 的学习体验很大程度上取决于你现有的 Android 开发背景。如果你之前从事的是“传统”的基于 View/XML 的Android 开发，那么你的学习曲线会与那些有Jetpack Compose经验的人有所不同。如果你已经熟悉 Compose 的声明式 UI 模型，那真是太好了☺️，你会发现 React Native 的组件化方法中有很多类似的概念。但是，如果你之前一直使用 XML 布局和命令式 View 操作，那么思维方式的转变可能会更大。

无论你的起点如何，我们都会探讨一些主要的不同概念。在开始之前，让我们先明确一下学习 React Native 的一些“先决条件”：

• 学习 JavaScript——虽然我不会深入探讨 JavaScript 与 Java/Kotlin 的区别，但理解 JavaScript 至关重要，因为 React Native 默认以 TypeScript 为目标框架。请务必先学习 JavaScript，打下坚实的基础。

• 理解 React 基础知识- React Native 基于 React 构建，因此您需要理解 React 的基础知识，因为 React Native 组件的核心概念是相同的。正因如此，本文中所有提及 React 的内容也适用于 React Native。

React 与 Android 的思考方式

使用 React 构建用户界面时，你的思维模式与 Android 开发有所不同。在 React 中，你首先会将 UI 分解成称为组件的部分。然后，你需要为每个组件描述不同的视觉状态。最后，你需要将这些组件连接起来，使数据能够在它们之间流动。

在 Android 开发中，你的架构设计将取决于你选择的 UI 框架。以下是一个简化的比较：

最根本的思维转变在于，React 的组件划分与 Android 不同。Android 应用程序围绕四个主要组件和意图构建：

• 活动：用户交互的入口点，代表一个包含用户界面的单个屏幕。
• 服务：在后台运行以执行长时间运行操作的组件
• 广播接收器：响应系统范围广播公告的组件
• 内容提供程序：管理共享应用程序数据的组件
• Intent：一种异步消息，用于激活活动、服务和广播接收器。

在 React 应用中，大部分功能都围绕 UI 组件及其状态管理展开，后台操作则通过不同的机制处理。

如果我们粗略地勾勒一下我们的心智模型：

让我们来分析一下典型的 React 应用的组成，看看这种架构是如何转化为应用的通用构建模块的：

在 React Native 中，应用程序的架构围绕组件及其交互展开，这意味着它没有预设的结构。相反，应用程序的组件和数据流的组织方式完全由你决定。这也意味着你需要有意识地规划代码的组织方式。

一个典型的 React Native 项目结构可能如下所示：

my-app/
├── android/                # Native Android project files 
├── ios/                    # Native iOS project files
├── node_modules/           # NPM dependencies (equivalent to Gradle dependencies)
├── src/                    # Your JavaScript/TypeScript code (like app/src/main in Android)
│   ├── components/         # Reusable UI components 
│   ├── screens/            # Screen components 
│   ├── navigation/         # Navigation configuration 
│   ├── services/           # API calls, business logic 
│   ├── hooks/              # Custom hooks 
│   ├── context/            # React Context definitions 
│   ├── utils/              # Helper functions 
│   └── assets/             # Images, fonts, etc. (like res/ directory)
├── App.js                  # Root component (comparable to Application class)
├── index.js                # Entry point (like MainActivity)
├── package.json            # NPM configuration (equivalent to build.gradle)
├── metro.config.js         # Metro bundler config (like gradle config)
├── babel.config.js         # Babel transpiler config 
└── tsconfig.json           # TypeScript configuration

现在我们已经梳理了 Android 和 React Native 之间的基本架构概念，并研究了一个典型的项目结构，让我们在脑海中勾勒出 React Native 应用程序的核心构建模块。

用户界面：组件、布局和样式

组件心智模型

在 Android 开发中，UI 构建模块是视图/视图组（用于传统开发）和可组合函数（用于 Jetpack Compose）。而在 React Native 中，一切皆组件。

传统的 Android 开发是命令式的，你需要手动操作 UI。而 React Native 是声明式的，你只需描述 UI 的外观即可。

布局

React Native 使用Flexbox进行布局，这与 Android 传统的 XML 布局系统有所不同：

• 布局容器：您将使用带有 flex 属性的视图组件，而不是 `<div> LinearLayout`、RelativeLayout`<span>` 或`<div>`。ConstraintLayout
• 单位：不使用 dp 或 sp，React Native 使用平台无关单位，可根据设备设置自动缩放。
• 定位：使用类似 ` justifyContentand`的属性，alignItems而不是 Android 的重力属性。

造型

React Native 提供了一个类似 CSS 的样式系统，对于 Android 开发人员来说，它既熟悉又不同，因为它结合了 Web CSS 和原生移动开发的概念：

React Native 不使用 XML 样式资源或 Compose 的修饰符系统，而是使用 JavaScript 对象来实现样式。然后，您可以将这些样式直接内联应用到组件，或者使用 StyleSheet API 来实现。

import { View, Text, StyleSheet } from "react-native";

function StyleExample() {
  return (
    // StyleSheet example
    <View style={styles.container}>
      // Inline example
      <Text
        style={{
          fontSize: 16,
          color: "blue",
        }}
      >
        Inline Style Example
      </Text>
    </View>
  );
}

// StyleSheet definition
const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
});

• 无资源限定符：没有像 Android 资源限定符那样针对不同屏幕尺寸/方向的内置系统。
• 响应式设计：依赖于百分比值、弹性属性和 Dimensions API，而不是不同的布局文件。
• 样式重置：默认情况下不进行全局样式继承；每个组件都需要显式设置样式。

// In React Native, this won't work as expected:
<View style={{ color: 'red' }}>
  <Text>This text will NOT be red</Text>
</View>

// Each component needs explicit styling:
<View style={{ backgroundColor: 'blue' }}>
  <Text style={{ color: 'red' }}>This text will be red</Text>
</View>

• 密度自适应：Android 使用特定的屏幕密度区间（mdpi、hdpi 等），而 React Native 则对此进行了抽象。React Native 中的所有尺寸都是无单位的，并且代表与屏幕密度无关的像素。
• 无需 XML 资源：无需像 Android 那样使用单独的样式文件或资源限定符。
• 没有内置主题/设计系统：没有与 Android 主题系统直接对应的系统；主题通常通过 Context 进行管理。

状态

与架构差异类似，你对状态管理的方法也会因你来自“传统”Android 还是 Jetpack Compose 而有所不同。

核心状态组件——属性、钩子和上下文

属性：属性（全称“properties”）是从父组件传递给子组件的不可变数据。由于它们是不可变的，因此有助于提高组件的可重用性。

在 Android 世界中，props 类似于：

• 传递给片段的参数
• 传递给 Activity 的 Intent 额外信息
• 传递给构造函数的参数

Hooks：React 提供的函数，允许开发者从组件中接入 React 功能。

上下文：上下文提供了一种在组件树中传递数据的方法，而无需在每一层手动传递 props。

核心状态概念

状态作为唯一数据源：
与其考虑如何更新用户界面，不如考虑在特定状态下用户界面应该是什么样子。用户界面反映的是状态，而不是反过来。

组件作为纯函数：
对于相同的 props/state，组件应该始终以相同的方式渲染。副作用通过 useEffect 单独处理。

不可变更新：
不要直接修改视图，而是创建一个描述更新内容的新状态。

组件生命周期

在传统的 Android 开发中，你需要使用一系列生命周期回调函数来管理 Activity 在其整个生命周期内的状态，而 React Native 则使用了一种更简单的挂载/卸载生命周期模型，该模型通过组件级别的 useEffect hook 来“访问”。以下是它们的比较：

导航

在传统的 Android 系统中，导航主要通过 Intent 系统和 Activity 堆栈进行管理，并使用 Jetpack Compose实现导航组件。React Native 的导航与 Android 有诸多不同之处：

• 没有内置系统：与 Android 的核心Intent 和 Activity系统不同，React Native 没有内置的导航框架。你需要选择一个第三方库，其中React Navigation是应用最广泛的解决方案。
• 基于组件：导航是通过组件而不是系统级意图来实现的。
• 基于栈的模型：类似于 Android 的返回栈，但使用 JavaScript 实现。导航路径和过渡效果在 JavaScript 中定义，而不是 XML 或系统调用。

虽然 Android 和 React Native 的导航基本概念相似，但实现方式有所不同，可以通过以下方式进行理解：

// Android Intent equivalent
function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => {
        // Instead of startActivity() with an Intent
        navigation.navigate('Details', {
          itemId: 86,
          title: 'Product Details',
        });
      }}
    />
  );
}

// Accessing route params (similar to Intent extras)
function DetailsScreen({ route }) {
  const { itemId, title } = route.params;

  return (
    <View>
      <Text>Details for {title}</Text>
      <Text>Item ID: {itemId}</Text>
    </View>
  );
}

业务逻辑

从 Android 过渡到 React Native 时，UI 和业务逻辑之间的关系会发生显著的思维转变。

在 Android 开发中

• UI代码和业务逻辑代码通常是同等重要的。
• MVVM、MVP 或 MVC 等架构模式将表示层与业务逻辑清晰地分离。
• 后端代码（存储库、服务、管理器）通常感觉与 UI 代码一样庞大。
• 人们通常认为用户界面仅仅是呈现数据的“视图”。

在 React Native 开发中

• UI组件和业务逻辑的集成度更高了。
• 组件同时执行表示和逻辑行为
• 该架构更注重“用户界面优先”，逻辑服务于用户界面。
• Hooks 将 UI 和逻辑问题融合在同一个组件中

在 React Native 中，你很可能会先从 UI 入手，然后再添加所需的逻辑，而不是先设计后端服务。这种“UI 驱动”的方法源于 React 的组件化架构，其中组件是主要的构建模块。随着项目复杂性的增加，你可能仍然会将纯粹的业务逻辑提取到自定义的 hooks、上下文或服务中，就像上面示例项目结构中展示的那样。随着你 React Native 学习的深入，你可能会逐渐形成自己平衡这些需求的独特风格。

虽然 React Native 改变了 UI 和业务逻辑之间的关系结构，但其后端服务（API 客户端、数据解析和状态同步）在概念上与 Android 类似，因此您的后端服务可以同时支持 Android 和 React Native 应用。在 React Native 中，您通常会用到以下库：

• 使用Fetch或axios进行 API 调用
• AsyncStorage用于数据持久化
• 平台 API/功能的本地模块

关键区别不在于你需要哪些后端服务，而在于它们如何与你的组件结构集成。你通常会创建自定义钩子来封装数据获取和状态管理，然后在组件中直接使用这些钩子。

进一步学习

希望本指南能帮助你将 React Native 与一些熟悉的 Android 开发概念联系起来，但请记住，这种联系仅仅是开始。虽然这些比较有助于你了解 React 与 Android 的区别，但它们并不能替代更深入的学习和实践。为了继续你的 React Native 学习之旅，以下是一些宝贵的资源：

• React Native 官方文档
• React Native：Udemy上的实用指南
• Expo - React Native 框架

希望能在“彼岸”见到你 😉