React Native CLI集成Storybook失败：Gradle构建报错求助

一、先排查 JSON 解析异常的核心原因 #

• 检查 .storybook/main.js/main.ts 配置文件：
  • 清理多余逗号、确保字符串用双引号（JSON不支持单引号）
  • 删除所有注释（JSON语法不允许注释）
• 检查 metro.config.js：确认配置对象的语法正确，无括号不匹配、逗号遗漏问题
• 检查 package.json 脚本：避免命令中出现多余转义或引号不匹配，比如错误的引号嵌套
• 检查 Android 端配置文件：gradle.properties/local.properties 中若有JSON格式的配置项，确保格式合法

二、标准 React Native CLI 集成 Storybook 步骤（无 Expo） #

1. 自动初始化 Storybook
   用官方命令生成配置，避免手动踩坑：

   npx storybook@latest init --type react_native
   

2. 确认入口切换逻辑
   项目根目录 index.js 需包含环境判断逻辑：

   import { AppRegistry } from 'react-native';
   import App from './App';
   import { name as appName } from './app.json';
   
   const useStorybook = process.env.STORYBOOK_ENABLED === 'true';
   
   if (useStorybook) {
     import('./.storybook').then(({ default: Storybook }) => {
       AppRegistry.registerComponent(appName, () => Storybook);
     });
   } else {
     AppRegistry.registerComponent(appName, () => App);
   }
   

3. Metro 配置修正
   metro.config.js 添加Storybook路径解析和冲突排除：

   const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
   
   module.exports = mergeConfig(getDefaultConfig(__dirname), {
     resolver: {
       blockList: [/\.storybook\/web\.js$/],
     },
   });
   

4. 脚本命令配置
   先安装依赖工具：

   npm install --save-dev concurrently
   

   然后在 package.json 中添加正确脚本：

   "scripts": {
     "storybook": "start-storybook -p 7007",
     "storybook:android": "concurrently \"npm run storybook\" \"npm run android\"",
     "storybook:ios": "concurrently \"npm run storybook\" \"npm run ios\""
   }
   

5. Gradle 缓存清理
   执行以下命令清理Android构建缓存，避免旧配置干扰：

   cd android && ./gradlew clean && cd ..
   

三、验证步骤 #

1. 删除旧依赖缓存：

   rm -rf node_modules package-lock.json
   npm install
   

2. 运行 npm run storybook:android，观察是否解决JSON解析异常

内容的提问来源于stack exchange，提问作者Muhammad Umer Nisar