Einrichten von Tailwind im React Native SDK mit NativeWind

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!

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

Schritt 2

index.tsx

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

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:

///

Dann sollte dieser Fehler nun behoben sein!

Schritt 3

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

`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

/**@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“

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:

`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!