Expo React Native项目集成Storybook后故事无法加载问题

你的操作存在3个核心错误，按优先级修正即可：

• 入口文件修改位置完全错误
  教程要求修改的是项目根目录下的App.js（Expo项目默认的应用入口文件），不是storybook/目录下的index.js。你之前没有替换根目录App.js的内容，应用启动时依然加载Expo初始化生成的默认页面，根本不会运行Storybook相关逻辑，自然无法和Storybook服务端通信、加载故事。
  你对教程提示的疑惑属于理解偏差：storybook/index.js本身的默认导出是写对的，教程的要求是让你把整个应用的默认导出指向Storybook的根组件，相当于启动App直接打开Storybook界面，不需要修改storybook内部的文件。直接把根目录App.js的全部内容替换为以下代码即可：

  export {default} from "./storybook";
  

• 启动流程错误
  执行yarn storybook启动的只是Storybook的Web控制面板，它本身不会运行React Native应用，也不会自动加载故事。你需要新开一个独立的终端窗口，在项目根目录执行expo start启动Expo开发服务，再用模拟器/真机上的Expo Go扫码打开应用，等应用和Web控制面板建立WebSocket连接后，故事内容才会同步到Web端。
• 缺少必要的连接配置
  打开storybook/index.js，给getStorybookUI补充本地连接配置，不要使用默认的localhost配置，否则真机/模拟器无法访问到你电脑上的Storybook服务：

  const StorybookUIRoot = getStorybookUI({
    host: '你电脑当前的局域网IPv4地址', // 比如192.168.3.12，可在网络设置中查看
    port: 7007, // 和Storybook Web服务的端口保持一致，默认是7007
    onDeviceUI: true
  });
  

额外检查项 #

如果做完以上配置还是加载不出故事，检查storybook/stories目录下是否存在入口文件：sb init在React Native项目下偶尔不会自动生成故事索引文件，你可以手动在storybook/stories下新建index.js，写入测试故事验证加载逻辑：

import React from 'react';
import { View, Text } from 'react-native';
import { storiesOf } from '@storybook/react-native';

storiesOf('测试分组', module)
  .add('测试故事', () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Storybook加载成功</Text>
    </View>
  ));

正确启动顺序：

• 先执行yarn storybook等Web控制面板完全启动
• 新开终端执行expo start，打开Expo应用
• 等终端提示设备连接成功后，刷新Web控制面板即可看到故事列表

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