Configuration de Tailwind dans React Native SDK avec NativeWind

Lorsque vous installez le nouveau SDK React Native 51 et que vous cherchez à écrire votre code avec Tailwind, je ne vais pas vous faire perdre du temps, commençons par :

Regardons d'abord la structure du dossier !

Dans votre structure de fichiers, nous devons ajouter quelques fichiers pour que cela fonctionne, à l'intérieur de "l'application", créez un fichier global.css puis ajoutez :

Étape 1

global.css

Étape 2

index.tsx

Alors maintenant, vous avez fait un pas en avant, vous allez maintenant ajouter un code simple pour "/app/(tabs)/index.tsx".

Maintenant, en ajoutant ce code, vous rencontrerez une erreur pour le className, ici vous devrez ajouter un fichier nativewind-env.d.ts

Remarque : NativeWind étend les types React Native via la fusion de déclarations. La méthode la plus simple pour inclure les types consiste à créer un nouveau fichier nativewind-env.d.ts et à ajouter une directive triple barre oblique faisant référence aux types.

à l'intérieur du fichier :

///

Alors maintenant, cette erreur aurait dû être corrigée !

Étape 3

Dans votre "/app/_layout.tsx" vous devez vous assurer d'avoir ce code :

`import {Slot} depuis "expo-router" ;

// Importez votre fichier CSS global
importer "../app/global.css";

exporter l'emplacement par défaut ;`

Étape 4

Alors maintenant vous devrez mettre à jour votre tailwind.config.js

/**@type {import('tailwindcss').Config}*/
module.exports = {
// REMARQUE : mettez à jour ceci pour inclure les chemins d'accès à tous vos fichiers de composants.
contenu : ["./app/**/*.{js,jsx,ts,tsx}"],
préréglages : [require("nativewind/preset")],
thème : {
étendre : {},
},
plugins : [],
};

copie ! le code et remplacez celui que vous avez.

Étape 5

Ici, nous ajouterons la partie la plus importante de "Nativewind" pour fonctionner avec React Native/Expo : notre "babel.config.js"

module.exports = fonction (api) {
api.cache(true);
revenir {
préréglages : [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};

assurez-vous d'avoir ce code comme ici.

Étape 6

la dernière partie pour faire fonctionner Tailwind, est "metro.config.js" si vous n'avez pas ce fichier, veuillez le créer puis vous avez ajouté ce code :

`const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./app/global.css" });`

La fin

Joyeux codage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!