u

code/docusaurus/docs/coding/react-native/第三方库/02-nativewind.md

@@ -0,0 +1,109 @@
+NativeWind 原子化 CSS 库
+> 官网：https://www.nativewind.dev/docs/getting-started/installation
+
+1. 安装依赖
+
+   ```bash
+   npx expo add nativewind react-native-reanimated react-native-safe-area-context
+   npx expo add tailwindcss@^3.4.17 -- --save-dev
+   ```
+
+2. 运行 `npx tailwindcss init` 生成 `tailwind.config.js` 文件，添加配置：
+
+   ```js
+   /** @type {import('tailwindcss').Config} */
+   module.exports = {
+     // NOTE: Update this to include the paths to all files that contain Nativewind classes.
+     content: ['./App.tsx', './components/**/*.{js,jsx,ts,tsx}'],
+     presets: [require('nativewind/preset')],
+     theme: {
+       extend: {},
+     },
+     plugins: [],
+   }
+   ```
+
+3. 创建 `global.css` 文件：
+
+   ```css
+   @tailwind base;
+   @tailwind components;
+   @tailwind utilities;
+
+   ```
+
+
+注意在全局引入
+
+4. 修改 `babel.config.js` 文件：
+
+   > 如果没有该文件，执行 `npx expo customize babel.config.js` 命令创建。
+
+   ```js
+   module.exports = function (api) {
+     api.cache(true)
+     return {
+       presets: [
+         ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+         'nativewind/babel',
+       ],
+     }
+   }
+   ```
+
+5. 修改 `metro.config.js` 文件：
+
+   > 如果没有该文件，执行 `npx expo customize metro.config.js` 命令创建。
+
+   ```js
+   const { getDefaultConfig } = require('expo/metro-config')
+   const { withNativeWind } = require('nativewind/metro')
+
+   const config = getDefaultConfig(__dirname)
+
+   module.exports = withNativeWind(config, { input: './global.css' })
+   ```
+
+6. 新建 `src/types/nativewind-env.d.ts` 文件：
+
+   ```ts
+   /// <reference types="nativewind/types" />
+   ```
+
+7. 安装 ` react-native-css-interop` ：
+
+   ```bash
+   npx expo install react-native-css-interop
+   ```
+
+8. 检验是否生效
+
+   ```tsx
+   import { Text, View } from 'react-native'
+   import './global.css'
+
+   export default function App() {
+     return (
+       <View className="flex-1 items-center justify-center bg-white">
+         <Text className="text-xl font-bold text-blue-500">
+           Welcome to Nativewind!
+         </Text>
+       </View>
+     )
+   }
+   ```
+
+   如果不生效，记得修改 `tailwind.config.js` 的目标路径：
+
+   ```js
+   /** @type {import('tailwindcss').Config} */
+   module.exports = {
+     // NOTE: Update this to include the paths to all files that contain Nativewind classes.
+     content: ['./src/app/_layout.tsx', './src/components/**/*.{js,jsx,ts,tsx}'],
+     presets: [require('nativewind/preset')],
+     theme: {
+       extend: {},
+     },
+     plugins: [],
+   }
+   ```