如何在Expo TypeScript React Native项目中正确安装并配置Storybook以支持React Native组件

我刚在自己的Expo + TypeScript React Native项目里搞定了Storybook的配置，之前也碰到了你说的问题：默认初始化的Storybook没法解析React Native组件。下面是我完整的操作步骤，你可以参考：

1. 初始化基础Storybook环境 #

首先按照指引执行初始化命令，安装过程中会让选择Webpack 5或Vite，我选了Webpack：

npx sb init --type react

安装全程没报错，能正常启动默认的Storybook，但这时候它还不识别React Native组件。

2. 安装RN Web支持依赖 #

接下来安装支持React Native Web的相关开发依赖，这些是让Storybook能解析RN组件的关键：

yarn add react-dom react-native-web babel-plugin-react-native-web @storybook/addon-react-native-web @react-native/babel-preset --dev

3. 配置.storybook/main.ts #

修改.storybook/main.ts文件，添加必要的插件和Webpack配置，让Storybook能处理RN的文件和语法：
这里给你一份可用的配置示例，你可以根据自己的项目结构调整：

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  // 指定stories文件的路径，按需调整
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    // 必须添加这个RN Web支持插件
    '@storybook/addon-react-native-web',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  // 自定义Webpack配置，处理TSX文件并应用RN的Babel预设
  webpackFinal: async (config) => {
    if (config.module?.rules) {
      config.module.rules.push({
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@react-native/babel-preset'],
            plugins: ['react-native-web'],
          },
        },
      });
    }
    return config;
  },
};

export default config;

4. 补充项目Babel配置（可选） #

如果你的项目根目录的babel.config.js还没配置RN相关预设，也需要同步修改：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo', // 保留Expo的预设
      '@react-native/babel-preset',
      '@babel/preset-typescript'
    ],
    plugins: ['react-native-web'],
  };
};

5. 启动测试 #

完成所有配置后，重启Storybook：

yarn storybook

这时候你应该就能在Storybook里正常导入并展示React Native组件了。

备注：内容来源于stack exchange，提问作者0xC0DEGURU