React Native 概览

React Native 用 React 组件模型写 iOS / Android 原生 UI（非 WebView 套壳）。语法熟悉 react-essentials，但布局、导航、平台 API 不同——对应路线图 mobile-applications 节点。

学习目标

• 说清 React Native 与 React DOM 的差异
• 了解 Expo 与裸 RN 工程的选择
• 知道何时 Web（Next.js）比 RN 更合适

与 React Web 的差异

	React DOM	React Native
渲染目标	HTML	原生 View/Text
样式	CSS	StyleSheet（flex 为主）
路由	React Router / Next	React Navigation
组件	div, span	View, Text, Pressable

心智可复用：组件、Hooks、Context、Query 同样适用；不能直接 import MUI Web 组件。

最小组件

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

export function LessonCard({ title, onPress }: { title: string; onPress: () => void }) {
  return (
    <Pressable onPress={onPress} style={styles.card}>
      <Text style={styles.title}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, borderRadius: 8, backgroundColor: "#fff" },
  title: { fontSize: 16, fontWeight: "600" },
});

布局默认 flexDirection: column；习惯 Web 的同学常先踩「为何不换行」的坑。

Expo vs 裸工程

• Expo：脚手架、OTA 更新、常用原生模块预集成——学习与小 App 首选
• 裸 RN / Expo prebuild：需自定义原生模块、深度 SDK 集成时

数据层仍可 TanStack Query + Axios 调同一套 Spring Boot API；鉴权 flow 与 Web 类似，存储改用 SecureStore。

与 CodeRoadMap 的关系

本站 platform 是 Next.js Web，不要求会 RN 才能贡献。若路线图勾选 mobile：

1. 完成 react-essentials + 本课概览
2. Expo 官方教程做一屏列表 + 详情
3. 可选：React Navigation + Query 拉 tracks API

GraphQL 移动端同样可用 Apollo Client，见 graphql-essentials。

Web 还是 Native？

选 Web（Next.js）	选 React Native
内容站、管理后台	推送、离线、相机
SEO、分享链接	应用商店分发
团队只会前端 Web	已有 mobile 路线图节点

练习

• npx create-expo-app 跑 Hello World
• 用 flex 做一行两列卡片布局
• 在 /roadmaps/react 找到 mobile 相关节点并标注

小结

同一 React 思维，不同渲染与平台 API。 下一课表单与 React Hook Form。