NativeWind 不能应用到 React-Native-Web 和 VITE 上吗？

Question

我在react-native中安装了react-native-web和nativewind。

{
  "name": "viteProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "web": "vite"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.4",
    "react-native-web": "^0.19.12",
    "vite": "^5.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.74.86",
    "@react-native/eslint-config": "0.74.86",
    "@react-native/metro-config": "0.74.86",
    "@react-native/typescript-config": "0.74.86",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-react-native-web": "^0.19.12",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.2",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

我创建了 vite.config.ts 并编写如下所示。

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

const extensions = [
  '.web.tsx',
  '.tsx',
  '.web.ts',
  '.ts',
  '.web.jsx',
  '.jsx',
  '.web.js',
  '.js',
  '.css',
  '.json',
  '.mjs',
];
export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: extensions,
    alias: {
      'react-native': 'react-native-web',
    },
  },
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
});

之后，我在App.tsx中编写了以下内容，

import {Text, View} from 'react-native';
import React from 'react';

export const App = () => {
  return (
    <View>
      <Text className={'border bg-red-600'}>test text</Text>
    </View>
  );
};

当我运行 vite 时，“测试文本”元素可见，但未应用 tailwind。 vite设置有误吗？在网上使用开发者工具检查元素时，似乎 tailwind 类未正确创建。

<div dir="auto" class="css-text-146c3p1">test text</div>

在 vite.config.ts 中

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

我添加了这样的插件，

web中没有生成nativewind的className

    <View>
      <Text className={'border bg-red-600'}>test text</Text>
    </View>

这部分在网络上似乎没有正确转换。哪一部分出了问题？

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['nativewind/babel'],
};

index.tsx

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import {App} from './App';
import {name as appName} from './app.json';
import {NativeWindStyleSheet} from 'nativewind';
import {Platform} from 'react-native';

NativeWindStyleSheet.setOutput({
  default: 'native',
});

AppRegistry.registerComponent(appName, () => App);

if (Platform.OS === 'web') {
  AppRegistry.runApplication(appName, {
    initialProps: {},
    rootTag: document.getElementById('root'),
  });
}

Answer 1

我在使用 Expo 和 Vite + React 应用程序创建 monorepo 时遇到了同样的问题。

就我而言，我按照以下步骤解决了问题：

1. 安装vite-plugin-react-native-web（开发）
2. 请将此代码合并到您的项目中。

   vite.config.ts

   ：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactNativeWeb from 'vite-plugin-react-native-web';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ],
        ],
      },
    }),
    reactNativeWeb(),
  ],
  server: {
    port: 3000,
  },
});

3. 更新

   tailwind.config.js

   文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    '../../packages/ui/components/**/*.{js,jsx,ts,tsx}'
  ],
  important: 'html',
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
}

重新启动服务结束享受吧:)