第三章：UI 组件——核心组件 + NativeWind + AI 生成

“React Native 核心组件只有几个：View、Text、Image、ScrollView、FlatList。NativeWind 让样式开发像 Web 一样直观。”

---

3.1 核心组件

flowchart
    A[View] --> B[容器]
    A --> C[布局]
    D[Text] --> E[文本]
    F[Image] --> G[图片]
    H[ScrollView] --> I[滚动]
    J[FlatList] --> K[长列表]

组件	用途	关键 props
View	容器	flex, style
Text	文本	numberOfLines
Image	图片	source, resizeMode
FlatList	长列表	data, renderItem

3.2 NativeWind 样式

flowchart
    A[className] --> B[NativeWind]
    B --> C[Tailwind 类]
    C --> D[编译为 StyleSheet]

常用类：

// 布局
<View className="flex-1 bg-white">
// 文字
<Text className="text-lg font-bold text-gray-900">
// 间距
<View className="p-4 m-2">
// 圆角
<View className="rounded-lg bg-blue-500">

3.3 AI 生成 UI 工作流

flowchart LR
    A[描述需求] --> B[v0 生成 Web 版]
    B --> C[Cursor 转换]
    C --> D[NativeWind 适配]

转换提示词：

“将以下 Web React 组件转换为 React Native 版本，使用 NativeWind。保持相同视觉效果。”

3.4 常用组件模式

Card 组件：

classDiagram
    class Card {
        +children: ReactNode
        +className?: string
    }
    class CardHeader
    class CardContent
    class CardFooter
    Card --> CardHeader
    Card --> CardContent
    Card --> CardFooter

列表项组件：

flowchart
    A[ListItem] --> B[Avatar/Icon]
    A --> C[标题 + 描述]
    A --> D[右侧操作]

3.5 暗色模式

// 使用 useColorScheme hook
import { useColorScheme } from "react-native"

function Component() {
  const colorScheme = useColorScheme()
  const bg = colorScheme === "dark" ? "bg-gray-900" : "bg-white"
  // ...
}

---

本章小结

1. 核心组件：View、Text、Image、FlatList
2. NativeWind：Tailwind 语法的 RN 版本
3. AI 生成：Web → RN 转换
4. 暗色模式：useColorScheme hook

---

本章提示词模板

生成 UI 组件

用 React Native + NativeWind 生成以下组件：

组件：[描述功能]

需要包含：
1. TypeScript 类型定义（props）
2. NativeWind 样式（className）
3. 状态管理（useState/useCallback）
4. 事件处理

使用 shadcn-nativewind 组件。

---

继续阅读：第四章：导航架构