Heim  >  Artikel  >  Web-Frontend  >  Einrichten von Tailwind im React Native SDK mit NativeWind

Einrichten von Tailwind im React Native SDK mit NativeWind

Barbara Streisand
Barbara StreisandOriginal
2024-11-05 08:14:02405Durchsuche

Wenn Sie das neue React Native 51 SDK installieren und Ihren Code mit Tailwind schreiben möchten, werde ich Ihre Zeit nicht verschwenden. Beginnen wir mit:

Sehen Sie sich zuerst die Ordnerstruktur an!
Setting Up Tailwind in React Native SDK with NativeWind

In Ihrer Dateistruktur müssen wir ein paar Dateien hinzufügen, damit es funktioniert. Erstellen Sie in der „App“ eine global.css-Datei und fügen Sie dann Folgendes hinzu:

Schritt 1

global.css

Setting Up Tailwind in React Native SDK with NativeWind

Schritt 2

index.tsx

Dann sind Sie jetzt einen Schritt weiter, jetzt wird ein einfacher Code für „/app/(tabs)/index.tsx“ hinzugefügt.

Setting Up Tailwind in React Native SDK with NativeWind

Nachdem Sie diesen Code hinzugefügt haben, wird ein Fehler für den Klassennamen angezeigt. Hier müssen Sie eine Datei „nativewind-env.d.ts“ hinzufügen

Hinweis: NativeWind erweitert die React Native-Typen durch Deklarationszusammenführung. Die einfachste Methode zum Einschließen der Typen besteht darin, eine neue Datei „nativewind-env.d.ts“ zu erstellen und eine Direktive mit drei Schrägstrichen hinzuzufügen, die auf die Typen verweist.

in der Datei:
Setting Up Tailwind in React Native SDK with NativeWind
///

Dann sollte dieser Fehler nun behoben sein!

Schritt 3

In Ihrer „/app/_layout.tsx“ müssen Sie sicherstellen, dass Sie diesen Code haben:

Setting Up Tailwind in React Native SDK with NativeWind
`import { Slot } from „expo-router“;

// Importieren Sie Ihre globale CSS-Datei
import "../app/global.css";

Standard-Slot exportieren;`

Schritt 4

Dann müssen Sie jetzt Ihre tailwind.config.js aktualisieren

Setting Up Tailwind in React Native SDK with NativeWind

/**@type {import('tailwindcss').Config}*/
module.exports = {
// HINWEIS: Aktualisieren Sie dies, um die Pfade zu allen Ihren Komponentendateien einzuschließen.
Inhalt: ["./app/**/*.{js,jsx,ts,tsx}"],
Voreinstellungen: [require("nativewind/preset")],
Thema: {
erweitern: {},
},
Plugins: [],
};

kopieren! Geben Sie den Code ein und ersetzen Sie den Code, den Sie haben.

Schritt 5

Hier fügen wir den wichtigsten Teil von „Nativewind“ für die Arbeit mit React Native/Expo hinzu: Unsere „babel.config.js“

Setting Up Tailwind in React Native SDK with NativeWind

module.exports = Funktion (API) {
api.cache(true);
zurück {
Voreinstellungen: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
„nativewind/babel“,
],
};
};

Stellen Sie sicher, dass Sie diesen Code hier haben.

Schritt 6

Der letzte Teil, damit Tailwind funktioniert, ist „metro.config.js“. Wenn Sie diese Datei nicht haben, erstellen Sie sie bitte, dann haben Sie diesen Code hinzugefügt:

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" });`

Das Ende

Viel Spaß beim Codieren

Das obige ist der detaillierte Inhalt vonEinrichten von Tailwind im React Native SDK mit NativeWind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn