RN的原理

RN的原理是用React的写法然后底层还是调用Native原生的组件，这正是 React Native（RN）最核心的运作原理。

我们可以把这个过程拆解为以下几个关键点：

1. 编写时：用 JavaScript + React

开发的时候，你不需要去写复杂的 Android（Kotlin/Java）或 iOS（Swift/Objective-C）代码，而是统一使用 JavaScript（或 TypeScript）以及你熟悉的 React 组件（如 <View>、<Text>、<Image>）来搭建界面和编写业务逻辑。

2. 运行时：动态映射与调用

当应用在手机上跑起来的时候，React Native 的底层框架会扮演一个“翻译官”的角色。它并不是把 JavaScript 代码编译成原生代码，而是在运行时（Runtime）通过桥接机制，根据你的 React 代码去调用对应平台的原生组件。

比如，你在代码里写了一个核心组件，在不同设备上最终渲染出来的就是地道的原生视图：

• 编写 <View> ──> 在 Android 上会调用并渲染为 <ViewGroup>，在 iOS 上则是 <UIView>。
• 编写 <Text> ──> 在 Android 上是 <TextView>，在 iOS 上则是 <UITextView>。

总结

这就解释了为什么用 React Native 做出的应用，其外观、手感和性能能够媲美纯原生应用——因为它的底层根本不是用浏览器套壳渲染的 HTML 网页，它最终呈现给用户的，就是实打实的原生 UI 组件。

---

Expo框架 - 基于RN封装

在 Mac 上开发 React Native (RN) 是最完美的选择，因为你可以同时兼顾 iOS 和 Android 双端。

为了让你最快、最顺滑地体验 RN 的开发过程，我强烈建议你跳过繁琐的原生环境配置（Xcode/Android Studio），直接使用 Expo 方案。这是目前官方和社区公认的新手最佳实践，能让你在几分钟内就把第一个 App 跑在自己的手机上。

以下是为你准备的从零到一的实操指南：

🛠️ 第一步：准备基础工具

1. 安装 Node.js：RN 的运行依赖它。建议去官网下载最新的 LTS（长期支持）版本（如 v20 或 v22）并安装。
2. 准备手机：在你的 iPhone 或 Android 手机上，去应用商店下载一个叫 Expo Go 的 App。
3. 代码编辑器：推荐使用 VS Code。

⚡️ 第二步：一键创建项目

打开 Mac 的终端（Terminal），输入以下命令来创建你的第一个 RN 项目：

pnpm create expo-app@latest myFirstRN

(注：myFirstRN 是你的项目名称，可以随意修改)

等待命令执行完毕，然后进入项目文件夹：

cd myFirstRN

📱 第三步：在手机真机上预览

在项目目录下，直接运行启动命令：

pnpm expo start

此时，终端会弹出一个交互界面，并生成一个二维码。

• 如果你是 iPhone：打开系统自带的相机，扫描这个二维码，会自动跳转到 Expo Go App。
• 如果你是 Android：打开 Expo Go App，可通过 https://expo.dev/go 下载，然后点击 “Scan QR Code” 进行扫描。

几秒钟后，你就会惊喜地发现，一个简单的模板页面已经成功运行在你自己的手机上了！

Metro是React Native 专用打包器，为RN定制，支持Metro Dev Server，让你在开发时实时预览效果。

💻 第四步：写一个最简单的自定义页面

现在我们来改点代码，体验一下 RN 的开发手感。用 VS Code 打开 MyFirstApp 文件夹，找到根目录下的 App.js（或 App.tsx），把里面的内容全部删掉，替换成下面这段最基础的代码：

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>👋 你好，React Native!</Text>
      <Text style={styles.subtitle}>这是我的第一个跨平台 App</Text>
    </View>
  );
}

// RN 使用 JS 对象来写样式，默认就是 Flexbox 布局
const styles = StyleSheet.create({
  container: {
    flex: 1, // 占满整个屏幕
    backgroundColor: '#f5f5f5', // 背景色
    alignItems: 'center', // 水平居中
    justifyContent: 'center', // 垂直居中
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

当你保存（Command + S）这段代码的瞬间，你会发现手机上的画面自动刷新了，变成了你刚刚写的界面。这就是 RN 强大的“热重载”功能，能极大提升开发效率。

📚 第五步：新手核心知识点速览

在体验过程中，你可能会发现它和写网页不太一样，记住这 3 个最核心的区别就能快速上手：

1. 没有 HTML 标签：RN 里没有 div、p、span。最常用的组件是 <View>（相当于容器 div）、<Text>（专门用来包裹文字）和 <Image>。
2. 样式即 JS 对象：不能写 CSS 文件，而是通过 StyleSheet.create 创建 JS 对象来控制样式。并且，RN 默认且几乎只使用 Flexbox 来进行布局。
3. 一切都是组件：和 React 一样，你可以把页面上的任何部分抽离成独立的组件，通过 props 传递数据，用 state 管理状态。

按照这个流程走下来，你不仅绕开了最容易劝退新手的复杂环境配置，还能立刻体会到 RN “一套代码，双端运行”的魅力。等你把这个简单的 Demo 玩熟了，再考虑去配置完整的原生开发环境也不迟。快去试试吧！