首頁  >  文章  >  web前端  >  使用 NativeWind 在 React Native SDK 中設定 Tailwind

使用 NativeWind 在 React Native SDK 中設定 Tailwind

Barbara Streisand
Barbara Streisand原創
2024-11-05 08:14:02405瀏覽

當安裝新的 React Native 51 SDK 並希望使用 Tailwind 編寫程式碼時,我不會浪費您的時間,讓我們從以下開始:

先看資料夾結構!
Setting Up Tailwind in React Native SDK with NativeWind

在您的文件結構中,我們需要添加一些文件才能使其正常工作,在「應用程式」內創建一個 global.css 文件,然後添加:

步驟1

global.css

Setting Up Tailwind in React Native SDK with NativeWind

步驟 2

index.tsx

那麼現在您向前邁出了一步,現在將為「/app/(tabs)/index.tsx」添加一個簡單的程式碼。

Setting Up Tailwind in React Native SDK with NativeWind

現在加入此程式碼後,您將遇到className錯誤,這裡您需要新增一個檔案nativewind-env.d.ts

注意:NativeWind 透過聲明合併擴展了 React Native 類型。包含類型的最簡單方法是建立一個新的 nativewind-env.d.ts 檔案並新增引用類型的三斜線指令。

文件內:
Setting Up Tailwind in React Native SDK with NativeWind
///

那麼現在這個錯誤應該已經修復了!

步驟3

在「/app/_layout.tsx」中,您必須確保有以下程式碼:

Setting Up Tailwind in React Native SDK with NativeWind
`從「expo-router」導入 { Slot };

// 匯入全域 CSS 檔案
導入“../app/global.css”;

匯出預設插槽;`

步驟 4

那現在你必須更新你的 tailwind.config.js

Setting Up Tailwind in React Native SDK with NativeWind

/**@type {import('tailwindcss').Config}*/
module.exports = {
// 注意:更新此內容以包含所有元件檔案的路徑。
內容: ["./app/**/*.{js,jsx,ts,tsx}"],
預設:[require("nativewind/preset")],
主題:{
擴充:{},
},
插件:[],
};

複製!代碼並替換您擁有的代碼。

步驟 5

在這裡,我們將添加“Nativewind”中最重要的部分以與 React Native/Expo 配合使用:我們的“babel.config.js”

Setting Up Tailwind in React Native SDK with NativeWind

module.exports = 函數 (api) {
api.cache(true);
返回{
預設:[
["babel-preset-expo", { jsxImportSource: "nativewind" }],
“nativewind/babel”,
],
};
};

確保您有此程式碼。

步驟 6

使 Tailwind 工作的最後一部分是“metro.config.js”,如果您沒有此文件,請創建它,然後添加以下程式碼:

Setting Up Tailwind in React Native SDK with NativeWind

`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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn