ホームページ  >  記事  >  ウェブフロントエンド  >  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
`import { スロット } から "expo-router";

// グローバル CSS ファイルをインポートします
import "../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

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

Setting Up Tailwind in React Native SDK with NativeWind

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

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。