给已配置的Expo项目添加原生Storybook遇STORYBOOK_ENABLED错误求助

问题根源 #

你使用的环境变量设置语法是Unix/Linux/macOS终端的写法，Windows的CMD或PowerShell不支持VAR='value' command这种格式，因此会触发STORYBOOK_ENABLED不是内部或外部命令的报错。

针对不同系统的修复方案 #

• Windows CMD用户：修改package.json中的脚本，用set命令设置环境变量

  "storybook": "sb-rn-get-stories && set STORYBOOK_ENABLED=true && expo start"
  

• Windows PowerShell用户：使用PowerShell的环境变量语法

  "storybook": "sb-rn-get-stories && $env:STORYBOOK_ENABLED='true'; expo start"
  

• macOS/Linux用户：若仍报错，尝试去掉引号或改用双引号

  "storybook": "sb-rn-get-stories && STORYBOOK_ENABLED=true expo start"
  

通用跨平台方案（推荐） #

安装cross-env包统一跨平台环境变量设置，避免系统差异：

1. 安装依赖：

   npm install --save-dev cross-env
   

2. 修改package.json脚本：

   "storybook": "sb-rn-get-stories && cross-env STORYBOOK_ENABLED=true expo start"
   

额外检查项 #

• 确认已正确安装Storybook相关依赖，比如@storybook/react-native、@storybook/addon-ondevice-controls等
• 检查项目根目录是否生成.storybook文件夹，且里面的main.js、preview.js等配置文件内容正确
• 确保Expo入口文件（通常是App.js或index.js）添加了Storybook条件加载逻辑：

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

内容的提问来源于stack exchange，提问作者Filip Be