React Native 0.70.6中Styled Components无法使用的解决求助

执行npm install styled-components后出现警告，应用随即无法运行。删除node_modules重新执行npm install仍报错，已尝试删除Pod文件、派生数据并重新安装，问题依旧。

控制台错误信息：

项目package.json配置如下：

{
  "name": "WolffMobile",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios --port=8088",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
  },
  "dependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/pro-duotone-svg-icons": "^6.2.1",
    "@fortawesome/pro-light-svg-icons": "^5.15.4",
    "@fortawesome/pro-regular-svg-icons": "^5.15.4",
    "@fortawesome/pro-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "@graphql-codegen/cli": "^2.13.12",
    "@graphql-codegen/typescript": "^2.8.2",
    "@graphql-codegen/typescript-graphql-request": "^4.5.8",
    "@graphql-codegen/typescript-operations": "^2.5.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
    "@react-native-picker/picker": "^2.4.8",
    "@react-navigation/bottom-tabs": "^6.4.3",
    "@react-navigation/native": "^6.0.16",
    "@react-navigation/native-stack": "^6.9.4",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.7",
    "@types/lodash": "^4.14.189",
    "axios": "^0.26.0",
    "clean-webpack-plugin": "^4.0.0",
    "compression-webpack-plugin": "^10.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "date-fns-tz": "^1.1.6",
    "formik": "^2.2.9",
    "graphql": "^16.6.0",
    "graphql-request": "^5.0.0",
    "graphql-tag": "^2.12.6",
    "html-webpack-plugin": "^5.5.0",
    "react": "^16.14.0",
    "react-content-loader": "^6.2.0",
    "react-dom": "^16.14.0",
    "react-is": "^16.13.1",
    "react-native": "0.70.6",
    "react-native-device-info": "^10.3.0",
    "react-native-elements": "^3.4.3",
    "react-native-modal": "^13.0.1",
    "react-native-msal": "^4.0.4",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-svg": "^13.7.0",
    "react-native-switch": "^1.5.1",
    "react-native-vector-icons": "^9.2.0",
    "react-query": "^3.39.2",
    "rn-fetch-blob": "^0.12.0",
    "styled-components": "^5.3.6",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.7.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react": "^18.0.21",
    "@types/react-native": "^0.70.8",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

针对React Native 0.70.6版本适配styled-components，按以下步骤操作：

1. 修复版本兼容问题 #

你的React版本是16.14.0，当前使用的styled-components 5.3.6存在潜在兼容风险，建议降级到更适配的版本：

npm uninstall styled-components
npm install styled-components@5.3.11

同时，react-test-renderer版本18.1.0与React 16.14.0不匹配，需同步降级：

npm uninstall react-test-renderer
npm install react-test-renderer@16.14.0 --save-dev

2. 添加styled-components必需的Babel插件 #

安装插件：

npm install --save-dev babel-plugin-styled-components

修改项目根目录的babel.config.js，添加插件配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['babel-plugin-styled-components', {
      displayName: true,
      ssr: false
    }],
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
};

3. 清理冗余依赖 #

你的dependencies中包含了Webpack相关依赖（如webpack、html-webpack-plugin等），这些是Web项目工具，React Native无需使用，会增加冲突风险，建议删除：

npm uninstall @pmmmwh/react-refresh-webpack-plugin clean-webpack-plugin compression-webpack-plugin copy-webpack-plugin html-webpack-plugin webpack webpack-bundle-analyzer webpack-cli webpack-dev-server webpack-merge

4. 彻底清理缓存并重装依赖 #

执行以下命令完成清理和重装：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 清理npm缓存
npm cache clean --force
# 清理Metro缓存
npx react-native start --reset-cache
# 重装依赖
npm install
# iOS项目更新Pods
cd ios && pod install && cd ..

5. 重启项目验证 #

npx react-native start --reset-cache
# 启动iOS
npx react-native run-ios --port=8088
# 或启动Android
npx react-native run-android

内容的提问来源于stack exchange，提问作者Cole Martindale