DEV Community
·
使用NativeWind v4和TypeScript的React Native Expo
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文介绍了在Expo项目中安装和配置NativeWind v4的步骤，包括创建Expo应用、安装必要包、初始化Tailwind配置、更新babel和metro配置，以及导入全局CSS文件。最后提供了在React Native中使用Tailwind样式的示例代码。
🎯
关键要点
- 创建Expo应用：使用命令npx create-expo-app@latest。
- 安装NativeWind v4及必要包：使用命令npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context。
- 初始化Tailwind配置：运行命令npx tailwindcss init，生成tailwind.config.js文件，并添加相应配置。
- 创建全局CSS文件：在根目录下创建global.css文件。
- 更新babel.config.js：根据Expo SDK版本更新babel配置。
- 创建metro.config.js：如果没有该文件，需创建并添加相应代码，适用于Expo SDK 50及以上版本。
- 创建nativewind-env.d.ts文件：添加类型引用。
- 导入全局CSS文件：在app/_layout.tsx中导入global.css。
- 示例代码：提供了在React Native中使用Tailwind样式的示例代码。
- 总结：所有步骤均参考NativeWind的官方文档，旨在帮助新手避免时间浪费。
❓
延伸问答
如何创建一个Expo应用？
使用命令npx create-expo-app@latest来创建Expo应用。
如何安装NativeWind v4及其依赖包？
运行命令npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context来安装NativeWind v4及必要包。
如何初始化Tailwind配置？
运行命令npx tailwindcss init，生成tailwind.config.js文件，并添加相应配置。
在Expo项目中如何更新babel配置？
根据Expo SDK版本更新babel.config.js，确保使用nativewind/babel。
如何在React Native中使用Tailwind样式？
在app/_layout.tsx中导入global.css，并在组件中使用Tailwind类名。
NativeWind v4的安装步骤有哪些？
安装步骤包括创建Expo应用、安装必要包、初始化Tailwind配置、更新babel和metro配置，以及导入全局CSS文件。
➡️
