ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。