Maison >interface Web >js tutoriel >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!