NativeWind를 사용하여 React Native SDK에서 Tailwind 설정

새로운 React Native 51 SDK를 설치하고 Tailwind를 사용하여 코드를 작성하려고 할 때 시간을 낭비하지 않고 다음부터 시작하겠습니다.

폴더구조 먼저 살펴보기!

파일 구조에서 작동하려면 몇 가지 파일을 추가해야 합니다. "앱" 내부에 global.css 파일을 만든 후 다음을 추가합니다.

1단계

global.css

2단계

index.tsx

이제 한 단계 더 나아갔습니다. 이제 "/app/(tabs)/index.tsx"에 대한 간단한 코드를 추가하겠습니다.

이제 이 코드를 추가하면 className에 대한 오류가 발생합니다. 여기에 Nativewind-env.d.ts

파일을 추가해야 합니다.

참고: NativeWind는 선언 병합을 통해 React Native 유형을 확장합니다. 유형을 포함하는 가장 간단한 방법은 새로운 Nativewind-env.d.ts 파일을 생성하고 해당 유형을 참조하는 삼중 슬래시 지시문을 추가하는 것입니다.

파일 내부:

///

이제 이 오류는 수정되었을 것입니다!

3단계

"/app/_layout.tsx"에 다음 코드가 있는지 확인해야 합니다.

`"expo-router"에서 { 슬롯 } 가져오기;

// 전역 CSS 파일 가져오기
import "../app/global.css";

기본 슬롯 내보내기;`

4단계

그러면 이제 tailwind.config.js를 업데이트해야 합니다

/**@type {import('tailwindcss').Config}*/
module.exports = {
// 참고: 모든 구성요소 파일의 경로를 포함하도록 이를 업데이트하세요.
콘텐츠: ["./app/**/*.{js,jsx,ts,tsx}"],
사전 설정: [require("nativewind/preset")],
테마: {
확장: {},
},
플러그인: [],
};

복사! 코드를 삭제하고 가지고 있는 코드를 교체하세요.

5단계

여기서 React Native/Expo와 함께 작동하기 위해 "Nativewind"의 가장 중요한 부분인 "babel.config.js"를 추가할 것입니다.

module.exports = 함수(api) {
api.cache(true);
반환 {
사전 설정: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};

여기에 이 ​​코드가 그대로 있는지 확인하세요.

6단계

Tailwind를 작동시키는 마지막 부분은 "metro.config.js"입니다. 이 파일이 없으면 파일을 만든 후 다음 코드를 추가하세요.

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

const config = getDefaultConfig(__dirname);

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

끝

행복한 코딩

위 내용은 NativeWind를 사용하여 React Native SDK에서 Tailwind 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!