當安裝新的 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中文網其他相關文章!