首页  >  文章  >  web前端  >  使用 NativeWind 在 React Native SDK 中设置 Tailwind

使用 NativeWind 在 React Native SDK 中设置 Tailwind

Barbara Streisand
Barbara Streisand原创
2024-11-05 08:14:02405浏览

当安装新的 React Native 51 SDK 并希望使用 Tailwind 编写代码时,我不会浪费您的时间,让我们从以下开始:

先看文件夹结构!
Setting Up Tailwind in React Native SDK with NativeWind

在您的文件结构中,我们需要添加一些文件才能使其正常工作,在“应用程序”内创建一个 global.css 文件,然后添加:

步骤1

global.css

Setting Up Tailwind in React Native SDK with NativeWind

步骤 2

index.tsx

那么现在您向前迈出了一步,现在将为“/app/(tabs)/index.tsx”添加一个简单的代码。

Setting Up Tailwind in React Native SDK with NativeWind

现在添加此代码后,您将遇到className错误,这里您需要添加一个文件nativewind-env.d.ts

注意:NativeWind 通过声明合并扩展了 React Native 类型。包含类型的最简单方法是创建一个新的 nativewind-env.d.ts 文件并添加引用类型的三斜杠指令。

文件内:
Setting Up Tailwind in React Native SDK with NativeWind
///

那么现在这个错误应该已经修复了!

步骤3

在“/app/_layout.tsx”中,您必须确保有以下代码:

Setting Up Tailwind in React Native SDK with NativeWind
`从“expo-router”导入 { Slot };

// 导入全局 CSS 文件
导入“../app/global.css”;

导出默认槽位;`

步骤 4

那么现在你必须更新你的 tailwind.config.js

Setting Up Tailwind in React Native SDK with NativeWind

/**@type {import('tailwindcss').Config}*/
module.exports = {
// 注意:更新此内容以包含所有组件文件的路径。
内容: ["./app/**/*.{js,jsx,ts,tsx}"],
预设:[require("nativewind/preset")],
主题:{
扩展:{},
},
插件:[],
};

复制!代码并替换您拥有的代码。

步骤 5

在这里,我们将添加“Nativewind”中最重要的部分以与 React Native/Expo 配合使用:我们的“babel.config.js”

Setting Up Tailwind in React Native SDK with NativeWind

module.exports = 函数 (api) {
api.cache(true);
返回{
预设:[
["babel-preset-expo", { jsxImportSource: "nativewind" }],
“nativewind/babel”,
],
};
};

确保您有此代码。

步骤 6

使 Tailwind 工作的最后一部分是“metro.config.js”,如果您没有此文件,请创建它,然后添加以下代码:

Setting Up Tailwind in React Native SDK with NativeWind

`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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn