React Native中的Storybook一直处于加载状态？

Question

我正在按照官方网站这里的介绍进行操作：https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

我已经重复了几次步骤，但仍然无法启动storybook。有人成功了吗？

有什么提示是我错过了什么吗？

如Tyler所请求的那样，我分享storybook索引文件如下（我没有更改任何内容，它是通过自动生成的新应用程序完成的）：

import { AppRegistry } from "react-native";

import {
  getStorybookUI,
  configure,
  addDecorator,
} from "@storybook/react-native";
import { withKnobs } from "@storybook/addon-knobs";

import "./rn-addons";

// enables knobs for all stories
addDecorator(withKnobs);

// import stories
configure(() => {
  require("./stories");
}, module);

// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);

export default StorybookUIRoot;

请添加 App.tsx 的屏幕截图。

请参考以下链接查看图片：

- Weijing Jay Lin

---

你可能想要发布一些你的代码。在Storybook初始化中，你的代码库应该有一些变化。你能发一下改变了什么以及如何改变吗？这将有助于人们更直接地回答你的问题。现在看起来好像Storybook正在“运行”，但也许组件中的某些东西配置不正确。没有更多细节很难说清楚。 - Tyler Williams

我没有添加或修改任何代码，你想看哪个文件？ - Weijing Jay Lin

如果您正在使用git，可以运行git status来检查初始化中发生了什么变化。然后检查这些文件，也许可以发布其中一个作为示例。如果没有任何更改，则可能是Storybook初始化出现了问题。 - Tyler Williams

你的设备模拟器也在运行吗？ - Tyler Williams

嗨@TylerWilliams，我也截取了storybook生成的文件。你尝试过这个教程吗？我也运行了expo build:iOS，但也无法解决问题。expo start --ios可以正常工作。 - Weijing Jay Lin

Answer 1

我曾尝试回答这个问题，但我的答案出于某种原因被删除了。由于我是该软件包的维护者，所以我很清楚这个问题，我不明白为什么这个答案无效。

这是一个普遍存在的问题。您可以在存储库中查看一些详细信息。

这里的问题在于移动Storybook UI和Web Storybook UI之间通过Websockets的连接。为了解决它，您需要确保正在使用正确的IP地址。

首先，您应该确保ondeviceUI已加载到您的移动设备上，因为Web UI从设备获取故事。

如果您仍然遇到问题，可以手动指定端口和IP地址。

首先，在getStorybookUI调用中设置IP和端口。

const StorybookUIRoot = getStorybookUI({
 host: "192.111.1.11", // replace this ip address with your local ip address
  port: "7007"
});

接下来需要调整启动react-native-server的脚本，加入端口和IP选项。确保使用与之前步骤完全相同的端口和主机，否则将不能正常工作。

它应该看起来像这样，但是请用您自己的IP地址替换其中的内容。

"storybook": "start-storybook -p 7007 -h 192.111.1.11"

- Danny

---

我想补充一下，对我来说，只需要在getStorybookUI调用中添加enableWebsockets: true就足够了，像这样：const StorybookUIRoot = getStorybookUI({ enableWebsockets: true, }); - undefined

是的，现在v6版本已经发布，WebSocket默认是禁用的，所以您需要手动启用它们。 - undefined

Answer 2

感谢 @TylerWilliams 的提示。

这可能是storybook上的一个未知bug，目前还没有完整的解决方案，但构建一个Android应用程序可以解决无限加载问题。

- Weijing Jay Lin

Answer 3

如果 Danny 的更改之后仍然无法正常工作，尝试删除您的 yarn.lock 文件并再次运行 yarn。

- teddybear