Menyediakan Tailwind dalam React Native SDK dengan NativeWind

Apabila memasang React Native 51 SDK baharu dan Ingin menulis kod anda menggunakan Tailwind, saya tidak akan membuang masa anda, mari mulakan dengan:

Melihat struktur folder dahulu!

Dalam struktur fail anda, kami perlu menambah beberapa fail untuk berfungsi, Di dalam "app" cipta fail global.css kemudian tambah:

Langkah 1

global.css

Langkah 2

index.tsx

Kemudian kini anda selangkah ke hadapan, kini akan menambah kod mudah untuk "/app/(tabs)/index.tsx".

Sekarang selepas menambah kod ini, anda akan menghadapi ralat untuk className, di sini anda perlu menambah fail nativewind-env.d.ts

Nota: NativeWind memanjangkan jenis React Native melalui penggabungan pengisytiharan. Kaedah paling mudah untuk memasukkan jenis adalah untuk mencipta fail nativewind-env.d.ts baharu dan menambah arahan tiga slash yang merujuk kepada jenis.

di dalam fail:

///

Maka kini ralat ini sepatutnya telah dibetulkan!

Langkah 3

Dalam "/app/_layout.tsx" anda, anda mesti memastikan anda mempunyai kod ini:

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

// Import fail CSS global anda
import "../app/global.css";

eksport Slot lalai;`

Langkah 4

Kemudian sekarang anda perlu mengemas kini tailwind.config.js anda

/**@type {import('tailwindcss').Config}*/
module.exports = {
// NOTA: Kemas kini ini untuk memasukkan laluan ke semua fail komponen anda.
kandungan: ["./app/**/*.{js,jsx,ts,tsx}"],
pratetap: [memerlukan("nativewind/preset")],
tema: {
lanjutkan: {},
},
pemalam: [],
};

salin! kod dan gantikan kod yang anda ada.

Langkah 5

Di sini kami akan menambah bahagian paling penting dalam "Nativewind" untuk bekerja dengan React Native/Expo: "babel.config.js" kami

module.exports = fungsi (api) {
api.cache(benar);
kembali {
pratetap: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};

pastikan anda mempunyai kod ini seperti di sini.

Langkah 6

bahagian akhir untuk membuat Tailwind berfungsi, ialah "metro.config.js" jika anda tidak mempunyai fail ini, sila buatnya kemudian anda menambah kod ini:

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

konfigurasi const = getDefaultConfig(__dirname);

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

Akhirnya

Selamat Pengekodan

Atas ialah kandungan terperinci Menyediakan Tailwind dalam React Native SDK dengan NativeWind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!