새로운 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!