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」に次のコードがあることを確認する必要があります:

`import { スロット } から "expo-router";

// グローバル CSS ファイルをインポートします
import "../app/global.css";

デフォルトのスロットをエクスポート;`

ステップ 4

次に、tailwind.config.js を更新する必要があります

/**@type {import('tailwindcss').Config}*/
module.exports = {
// 注: すべてのコンポーネント ファイルへのパスを含めるようにこれを更新してください。
コンテンツ: ["./app/**/*.{js,jsx,ts,tsx}"],
プリセット: [require("nativewind/preset")],
テーマ: {
拡張: {},
}、
プラグイン: []、
};

コピーしてください!コードを削除して、お持ちのコードと置き換えてください。

ステップ 5

ここでは、React Native/Expo で動作する「Nativewind」の最も重要な部分、つまり「babel.config.js」を追加します

module.exports = 関数 (API) {
api.cache(true);
戻り値 {
プリセット: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"ネイティブウィンド/バベル",
]、
};
};

このコードがここにあることを確認してください。

ステップ 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 中国語 Web サイトの他の関連記事を参照してください。