如何部署React Native Storybook并共享组件库供测试？

方案1：让团队成员本地启动Storybook #

这是最直接的方式，无需额外构建步骤：

• 让团队克隆你的项目代码到本地
• 安装项目依赖：npm install 或 yarn install
• 启动Storybook服务：npx storybook start -p 7007（默认端口7007，可按需修改）
• 团队成员可通过两种方式查看组件：一是在本地模拟器/真机上运行RN项目；二是在浏览器访问http://localhost:7007使用Storybook的Web UI

方案2：打包成独立的测试APK/IPA #

将Storybook作为应用入口，打包成安装包发给团队直接安装测试：

1. 修改项目入口文件（如index.js），替换默认App入口为Storybook：

import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';
import './storybook/stories';

configure(() => {
  // 加载所有stories文件
}, module);

const StorybookUIRoot = getStorybookUI({});

AppRegistry.registerComponent('YourAppName', () => StorybookUIRoot);

2. 执行打包命令：
   • Android：cd android && ./gradlew assembleRelease，生成的APK位于android/app/build/outputs/apk/release/目录
   • iOS：用Xcode打开ios/YourAppName.xcworkspace，选择目标设备后执行Product > Archive，再导出IPA文件

方案3：修复react-native-web + Storybook的构建问题 #

之前转Web失败通常是组件依赖或配置适配问题，可尝试以下调整：

• 补全依赖安装：npm install react-native-web @storybook/react
• 修改Storybook配置文件（.storybook/main.js），添加webpack适配规则：

module.exports = {
  stories: ['../src/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
    };
    config.resolve.extensions.push('.web.js', '.web.ts', '.web.tsx');
    return config;
  },
};

• 检查组件中是否包含Web不支持的原生API（如NativeModules），用平台判断包裹这类代码：

import { Platform } from 'react-native';

if (Platform.OS === 'native') {
  // 仅原生端执行的代码逻辑
}

方案4：Expo项目远程发布（仅适用于Expo环境） #

如果项目基于Expo，可直接发布Storybook版本到Expo服务器：

• 修改入口为Storybook后，执行expo publish
• 团队成员用Expo Go app扫描生成的二维码，即可远程预览组件库

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