Rumah  >  Artikel  >  hujung hadapan web  >  Menyediakan Tailwind dalam React Native SDK dengan NativeWind

Menyediakan Tailwind dalam React Native SDK dengan NativeWind

Barbara Streisand
Barbara Streisandasal
2024-11-05 08:14:02405semak imbas

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!
Setting Up Tailwind in React Native SDK with NativeWind

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

Langkah 1

global.css

Setting Up Tailwind in React Native SDK with NativeWind

Langkah 2

index.tsx

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

Setting Up Tailwind in React Native SDK with NativeWind

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:
Setting Up Tailwind in React Native SDK with NativeWind
///

Maka kini ralat ini sepatutnya telah dibetulkan!

Langkah 3

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

Setting Up Tailwind in React Native SDK with NativeWind
`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

Setting Up Tailwind in React Native SDK with NativeWind

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

Setting Up Tailwind in React Native SDK with NativeWind

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:

Setting Up Tailwind in React Native SDK with NativeWind

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn