在React native CLI项目中添加Native wind的指南

fquxozlt  于 2023-04-07  发布在  React
关注(0)|答案(2)|浏览(218)

您可以按照本机风文档中给出的指南进行操作。
https://www.nativewind.dev/guides/troubleshooting
https://www.nativewind.dev/guides/cli-native#native
按照下面给出的步骤
将NativeWind插件添加到tailwind.config.js
我的tailwind.config.js在下面

const nativewind = require('nativewind/tailwind/native');
module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [nativewind()],
};

将tailwinds添加到postcss.config.js中,它看起来像这样

module.exports = {
  plugins: {
    'nativewind/postcss': {
      output: 'nativewind-output.js',
    },
  },
};

创建一个PostCSS配置文件,就像这样

// postcss.config.js
module.exports = {
  plugins: {
    'nativewind/postcss': {
      output: 'nativewind-output.js',
    },
  },
};

将NativeWind插件添加到您的tailwind.config.js中,并根据您的矿井添加文件夹,分别是组件,页面和屏幕以及app.js

/** @type {import('tailwindcss').Config} */
const nativewind = require('nativewind/tailwind/native');
module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [nativewind()],
};

运行Tailwind CLI将生成nativewind-output.js。在此之前,您应该创建output.css并运行给定的命令

npx tailwindcss -i input.css --postcss postcss.config.js

通过在app.js中添加以下行将样式导入App.jsx

import "./nativewind-output"

然后在package.json中,您必须通过添加以下行来对脚本进行小的更改,将"start": "expo start"替换为下面的行

// package.json
{
  "scripts": {
      //  Change 
   "start": "concurrently \"tailwindcss -i input.css --postcss postcss.config.js --watch\" \"expo start\""
  },
  // 
}

最后重新启动开发服务器,并开始在react native cli应用程序中编写tailwinds

j8yoct9x

j8yoct9x1#

我试过了,似乎不起作用,你写的是React Native CLI,但你的最后一行是:

// package.json
    {
      "scripts": {
          //  Change 
       "start": "concurrently \"tailwindcss -i input.css --postcss 
    postcss.config.js --watch\" \"expo start\""
      },
      // 
    }

你能澄清一下吗。

u4dcyp6a

u4dcyp6a2#

这是使用Native wind(Tailwind css)设置的React native Cli项目的GitHub存储库的链接
https://github.com/noman2233/React-native-cli-template-with-native-wind-tailwind-css-Setup.git

相关问题