当安装新的 React Native 51 SDK 并希望使用 Tailwind 编写代码时,我不会浪费您的时间,让我们从以下开始:
先看文件夹结构!
在您的文件结构中,我们需要添加一些文件才能使其正常工作,在“应用程序”内创建一个 global.css 文件,然后添加:
步骤1
global.css
步骤 2
index.tsx
那么现在您向前迈出了一步,现在将为“/app/(tabs)/index.tsx”添加一个简单的代码。
现在添加此代码后,您将遇到className错误,这里您需要添加一个文件nativewind-env.d.ts
注意:NativeWind 通过声明合并扩展了 React Native 类型。包含类型的最简单方法是创建一个新的 nativewind-env.d.ts 文件并添加引用类型的三斜杠指令。
文件内:
///
那么现在这个错误应该已经修复了!
步骤3
在“/app/_layout.tsx”中,您必须确保有以下代码:
`从“expo-router”导入 { Slot };
// 导入全局 CSS 文件
导入“../app/global.css”;
导出默认槽位;`
步骤 4
那么现在你必须更新你的 tailwind.config.js
/**@type {import('tailwindcss').Config}*/
module.exports = {
// 注意:更新此内容以包含所有组件文件的路径。
内容: ["./app/**/*.{js,jsx,ts,tsx}"],
预设:[require("nativewind/preset")],
主题:{
扩展:{},
},
插件:[],
};
复制!代码并替换您拥有的代码。
步骤 5
在这里,我们将添加“Nativewind”中最重要的部分以与 React Native/Expo 配合使用:我们的“babel.config.js”
module.exports = 函数 (api) {
api.cache(true);
返回{
预设:[
["babel-preset-expo", { jsxImportSource: "nativewind" }],
“nativewind/babel”,
],
};
};
确保您有此代码。
步骤 6
使 Tailwind 工作的最后一部分是“metro.config.js”,如果您没有此文件,请创建它,然后添加以下代码:
`const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: "./app/global.css" });`
完结
快乐编码
以上是使用 NativeWind 在 React Native SDK 中设置 Tailwind的详细内容。更多信息请关注PHP中文网其他相关文章!