# expo-nativewind

**Repository Path**: chenbool/expo-nativewind

## Basic Information

- **Project Name**: expo-nativewind
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-17
- **Last Updated**: 2026-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# expo-nativewind

> 基于 **Expo SDK 54** + **React Native 0.81** + **NativeWind 4 (Tailwind CSS)** 的跨平台移动应用脚手架，应用名 `film`，已启用 React Native 新架构（New Architecture）。

#### 技术栈

| 分类 | 依赖 | 版本 |
| --- | --- | --- |
| 框架 | expo | ~54.0.7 |
| 运行时 | react / react-native | 19.1.0 / 0.81.4 |
| 样式 | nativewind / tailwindcss | ^4.2.1 / ^3.4.17 |
| 动画 | react-native-reanimated | ~3.17.4 |
| 安全区域 | react-native-safe-area-context | ^5.4.0 |
| 工作线程 | react-native-worklets | ^0.5.1 |
| 构建 | @babel/core / babel-preset-expo | ^7.20.0 / ^54.0.1 |
| 格式化 | prettier-plugin-tailwindcss | ^0.5.11 |

#### 软件架构

```
expo-nativewind/
├── App.js                 # 根组件（NativeWind className 示例）
├── index.js               # 入口，registerRootComponent 注册 App
├── app.json               # Expo 配置（name=film，新架构开启，edge-to-edge）
├── babel.config.js        # Babel：babel-preset-expo + nativewind/babel
├── metro.config.js        # Metro：withNativeWind 注入 global.css
├── tailwind.config.js     # Tailwind：nativewind/preset，扫描 App/components/app
├── global.css             # @tailwind base/components/utilities
├── assets/                # icon / splash / adaptive-icon / favicon
└── package.json           # 依赖与脚本
```

- **样式链路**：`global.css` → Metro (`withNativeWind`) → Babel (`jsxImportSource: "nativewind"`) → 组件 `className` 直接使用 Tailwind 原子类。
- **新架构**：`app.json` 中 `newArchEnabled: true`，Android 启用 `edgeToEdgeEnabled`。
- **入口**：`index.js` → `App.js`，当前为最小可运行示例（黑底白字 + StatusBar）。

#### 安装教程

1.  环境要求：Node.js ≥ 18，并按 [Expo 官方指南](https://docs.expo.dev/get-started/installation/) 安装 Expo CLI 与模拟器/真机环境。
2.  安装依赖：
    ```bash
    npm install
    ```
3.  启动开发服务器：
    ```bash
    npm start
    ```

#### 使用说明

1.  **Android**：`npm run android`（或 Expo DevTools 中按 `a`）
2.  **iOS**：`npm run ios`（或按 `i`，需 macOS + Xcode）
3.  **Web**：`npm run web`（或按 `w`，Metro bundler）
4.  **新增组件使用 Tailwind 类**：在 `App.js` 或 `components/`、`app/` 下直接写 `className="flex-1 bg-white"`，`tailwind.config.js` 已配置扫描路径。
5.  **样式自定义**：编辑 `tailwind.config.js` 的 `theme.extend`，或在 `global.css` 追加自定义层。

#### 参与贡献

1.  Fork 本仓库
2.  新建 `Feat_xxx` 分支
3.  提交代码
4.  新建 Pull Request

#### 参考

- NativeWind 安装文档：https://www.nativewind.dev/docs/getting-started/installation
- Expo 文档：https://docs.expo.dev
- Tailwind CSS 文档：https://tailwindcss.com/docs