如何同时在Web端运行react-native Storybook并在iOS运行Expo应用

你可以通过共用组件源码+分别配置两端运行环境的方式实现需求，两个服务独立运行互不干扰，具体操作步骤如下：

1. 安装必要依赖 #

在现有Expo项目中安装Storybook相关依赖：

npm install @storybook/react-native @storybook/addon-react-native-web @storybook/addon-essentials @storybook/addon-links --save-dev

2. 配置Web端Storybook #

在项目根目录创建.storybook文件夹，新增两个配置文件：

main.js 配置 #

module.exports = {
  // 指定stories文件匹配规则，可根据你的项目结构调整
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    // *核心插件，支持在Web端渲染React Native组件*
    "@storybook/addon-react-native-web"
  ],
  webpackFinal: async (config) => {
    // 配置别名，把React Native相关模块映射为Web端兼容版本
    config.resolve.alias = {
      ...config.resolve.alias,
      "react-native": "react-native-web",
      "expo-modules-core": "expo-modules-core/build/index.web.js"
      // 如果你用到其他Expo原生模块，在这里补充对应的web端实现别名即可
    };
    return config;
  }
};

package.json 脚本配置 #

在scripts字段中新增Web端Storybook启动命令，指定端口为7007：

{
  "scripts": {
    "start": "expo start",
    "storybook:web": "start-storybook -p 7007"
  }
}

3. 组件复用规则 #

所有业务组件统一存放在src/components（可自定义路径）目录下，Storybook的stories文件和Expo应用都直接引用该目录下的组件源码，保证组件修改后两端同步生效。
如果有Web端不支持的原生模块，直接在Storybook配置中添加对应mock即可，不会影响Expo端的原生功能运行。

4. 同时启动两端服务 #

• 开第一个终端，执行npm run storybook:web，即可在浏览器的localhost:7007访问Storybook，完成组件定义、调试工作
• 开第二个终端，执行expo start，选择iOS模拟器即可正常启动你的应用

两个服务完全独立运行，修改组件代码时两端都会自动触发热更新。

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