使用 NativeWind 在 React Native SDK 中设置 Tailwind

当安装新的 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中文网其他相关文章！