WebStorm需手动配置Live Template（导入ReactNative.jar或xml）和JavaScript类型库（下载并启用react/react-native），缺一则组件标红、StyleSheet属性不提示；导入后须重启，且StyleSheet属性需先按Ctrl+J/Cmd+J触发模板。
WebStorm 本身不自带 React 或 React Native 的完整代码提示，必须手动配置 Live Template + JavaScript 类型库，缺一不可。只装插件、只配 node_modules 或只开 JSX 支持，都会导致组件标红、样式属性不补全、onPress 等 API 没提示。
怎么导入 ReactNative Live Template（关键一步）
Live Template 负责组件名、API 名、StyleSheet 属性等「写得快」的补全，但不是自动弹出的——得主动触发。
- 从 GitHub 仓库 克隆或下载项目，用
./gradlew build打包出ReactNative.jar（Mac/Windows/Linux 通用） - WebStorm 中：File → Import Settings… → 选中该
ReactNative.jar→ 点 OK - Mac 用户若想复制
ReactNative.xml，路径必须严格匹配当前版本，例如 WebStorm 2023.3 对应~/Library/Preferences/WebStorm2023.3/templates，错一个数字就无效 - 导入后必须重启 WebStorm，否则模板不会加载
- 验证方式：在 JSX 文件里输入
V，看是否出现View补全；在style={}内按Cmd+J（macOS）或Ctrl+J（Win/Linux），再输f，看是否列出flex、fontSize
为什么组件名还是标红？补全 ≠ 类型识别
标红说明 WebStorm 不知道 View 是什么类型，这不是 Live Template 能解决的，得靠类型定义库。
- 打开 Settings → Languages & Frameworks → JavaScript → Libraries
- 点
Download…，搜索并安装react和react-native（务必选最新稳定版，避开 alpha/beta） - 安装完后，在同一页面勾选这两个库，并确认它们作用于当前项目（Scope 列显示 Project）
- 如果项目是 TypeScript，还要检查
node_modules/@types/react-native是否存在；没有的话，运行npm install --save-dev @types/react-native - 常见错误：只装了
react没装react-native，或装了但没勾选，或装在全局库而非项目库
JSX 语法报错或提示失效的底层开关
有些报错看着像插件问题，其实是基础语言支持没开。
- 确保文件后缀是
.js或.jsx，且右下角状态栏显示 “JavaScript Language Version: React JSX” —— 如果不是，点它手动切换 - 关闭 Power Save Mode：File → Power Save Mode（取消勾选），否则所有代码分析会暂停
- 检查缓存：File → Invalidate Caches and Restart → Invalidate and Restart，尤其在改过库引用或模板后
- 如果用了自定义 Babel 配置（如
.babelrc），需在 Settings → Languages & Frameworks → JavaScript → Libraries → JavaScript Language Version 中设为 “React JSX”，否则类型推导会断掉
最容易被忽略的是：Live Template 必须配合类型库才能闭环。有人导入了 ReactNative.jar 却发现 Text 还是标红，其实只是缺了 react-native 类型定义；也有人装了类型库却输 onP 不出 onPress，其实是忘了按 Ctrl+J 触发模板。这两步各自独立，又相互依赖，少一个都算白配。
