使用 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中文網其他相關文章！