React 18 不兼容styled-components问题求助

架构老林

2026-4-23

嘿，我之前刚踩过这个坑！React 18发布后，旧版本的styled-components确实会出现兼容性问题，不过解决起来很简单，给你几个实用的步骤：

先升级styled-components到兼容React 18的版本
旧版本（比如5.3.9及以下）不支持React 18的并发特性，直接装最新稳定版就行：
```
npm install styled-components@latest
# 或者用yarn的话
yarn add styled-components@latest
```
确认下安装后的版本，至少要在5.3.10及以上，这个版本开始官方适配了React 18。
检查并配置babel插件
React Native里用styled-components必须配合babel-plugin-styled-components，否则可能会出现奇怪的渲染问题或者报错。先安装插件：
```
npm install babel-plugin-styled-components --save-dev
# yarn的话
yarn add babel-plugin-styled-components --dev
```
然后修改你的babel.config.js文件，把插件加进去：
```
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['babel-plugin-styled-components'],
};
```
清除缓存，避免旧缓存干扰
React Native的metro缓存有时候会搞事情，执行下面的命令重置缓存：
```
npx react-native start --reset-cache
```
额外排查点
如果还是不行，去看看你package.json里的react和react-dom版本是不是真的是18.x，有没有不小心装成混合版本的情况；要是用Expo的话，确保Expo版本在47以上，这个版本才开始支持React 18。