You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

安装nativewind后React Native的Metro服务启动失败求助

问题:React Native安装TailwindCSS + NativeWind后Metro启动失败

我的React Native应用原本运行正常,安装tailwindcss及nativewind后,Metro服务启动失败。执行run:android命令时,应用能在设备上启动,但Metro服务报错(错误截图:错误截图)。我已按NativeWind官方文档完成安装和配置,删除node_modules重装后问题仍未解决,恳请开发者提供帮助。

以下是我的package.json配置:

{  
  "name": "react-native-starter",  
  "version": "2.1.0",  
  "private": false,  
  "resolutions": {    
    "deprecated-react-native-listview": "0.0.6"  
  },  
  "scripts": {    
    "start": "react-native start",    
    "test": "jest",    
    "test:update": "jest -u",    
    "test:coverage": "jest --coverage",    
    "run:ios": "react-native run-ios",    
    "run:android": "react-native run-android",    
    "lint": "./node_modules/eslint/bin/eslint.js src",    
    "lint:fix": "./node_modules/eslint/bin/eslint.js src --fix",    
    "flow": "./node_modules/flow-bin/cli.js",    
    "e2e:build": "detox build --configuration ios.sim.debug",    
    "e2e:test": "detox test --configuration ios.sim.debug"  
  },  
  "dependencies": {    
    "@react-native-community/cli": "^4.10.1",    
    "@react-native-community/masked-view": "^0.1.9",    
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",    
    "@react-navigation/bottom-tabs": "^5.2.6",    
    "@react-navigation/drawer": "^5.4.1",    
    "@react-navigation/native": "^5.1.5",    
    "@react-navigation/stack": "^5.2.10",    
    "global": "^4.4.0",    
    "i18n-js": "^3.2.1",    
    "jetifier": "^1.6.5",    
    "lodash": "^4.17.13",    
    "moment": "^2.24.0",    
    "nativewind": "^2.0.11",    
    "react": "16.9.0",    
    "react-native": "0.63.1",    
    "react-native-calendars": "1.265.0",    
    "react-native-gesture-handler": "^1.5.0",    
    "react-native-gifted-chat": "^0.11.3",    
    "react-native-lightbox": "^0.8.0",    
    "react-native-linear-gradient": "^2.5.6",    
    "react-native-localize": "^1.3.1",    
    "react-native-modal": "^9.0.0",    
    "react-native-modal-datetime-picker": "^6.0.0",    
    "react-native-modal-dropdown": "0.7.0",    
    "react-native-paper": "^3.1.1",    
    "react-native-reanimated": "^1.8.0",    
    "react-native-safe-area-context": "^0.7.3",    
    "react-native-screens": "^2.5.0",    
    "react-native-ui-lib": "^3.39.0",    
    "react-native-vector-icons": "^6.6.0",    
    "react-redux": "^6.0.1",    
    "recompose": "^0.30.0",    
    "redux": "^4.0.1",    
    "redux-logger": "^3.0.6",    
    "redux-persist": "^5.10.0",    
    "redux-promise": "^0.6.0",    
    "redux-thunk": "^2.3.0",    
    "victory-native": "^31.0.0"  
  },  
  "devDependencies": {    
    "@babel/core": "^7.5.0",    
    "@babel/preset-flow": "^7.0.0",    
    "@babel/runtime": "^7.5.0",    
    "@react-native-community/eslint-config": "^0.0.3",    
    "babel-eslint": "^10.0.1",    
    "babel-jest": "^24.1.0",    
    "danger": "^7.0.2",    
    "enzyme": "^3.7.0",    
    "enzyme-adapter-react-16": "^1.7.0",    
    "eslint": "^5.9.0",    
    "eslint-config-airbnb": "^17.1.0",    
    "eslint-config-prettier": "^3.6.0",    
    "eslint-plugin-import": "^2.14.0",    
    "eslint-plugin-jsx-a11y": "^6.1.2",    
    "eslint-plugin-react": "^7.11.1",    
    "flow-bin": "^0.105.0",    
    "jest": "^24.1.0",    
    "jsdom": "13.0.0",    
    "jsdom-global": "3.0.2",    
    "metro-react-native-babel-preset": "^0.51.1",    
    "plop": "^2.2.0",    
    "prettier": "^1.16.1",    
    "react-addons-test-utils": "^15.6.2",    
    "react-dom": "^16.6.3",    
    "react-test-renderer": "16.8.1",    
    "sinon": "^7.1.1",    
    "tailwindcss": "^3.2.2"  
  },  
  "jest": {    
    "preset": "react-native",    
    "transform": {      
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"    
    },    
    "collectCoverage": true,    
    "collectCoverageFrom": [      
      "src/**/*.{js,jsx}",      
      "!**/node_modules/**",      
      "!android/**",      
      "!ios/**",      
      "!assets/**"    
    ],    
    "coverageDirectory": "jest_coverage",    
    "setupFiles": [      
      "./jest-setup.js"    
    ],    
    "testPathIgnorePatterns": [      
      "/node_modules/",      
      "/e2e/"    
    ]  
  },  
  "rnpm": {    
    "assets": [      
      "./assets/fonts/"    
    ]  
  },  
  "detox": {    
    "configurations": {      
      "ios.sim.debug": {        
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ReactNativeStarter.app",        
        "build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",        
        "type": "ios.simulator",        
        "name": "iPhone XS"      
      },      
      "ios.sim.release": {        
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/ReactNativeStarter.app",        
        "build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",        
        "type": "ios.simulator",        
        "name": "iPhone 7"      
      }    
    },    
    "test-runner": "jest"  
  }
}

内容的提问来源于stack exchange,提问作者Hemo 1997

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.13 18:35:41