Storybook 保持加载状态以响应本机？

Question

我这里是按照官网的介绍：https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

重复了几次步骤，还是无法启动故事书。有人成功了吗？

我错过了什么提示？

应 Tyler 的要求，我将故事书索引文件分享如下（我没有更改任何内容，已完成自动生成新应用程序）：

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.

的屏幕截图

Answer 1

感谢@TylerWilliams 的提示。

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

Answer 2

我已经尝试回答过一次，但由于某种原因我的回答被删除了。我非常了解这个问题，因为我是软件包的维护者，所以我不明白为什么这个答案无效。

这是一个常见问题。您可以从 repo.

查看这个固定问题的更多详细信息

这里的问题是移动故事书 UI 和网络故事书 UI 通过 websockets 之间的连接。为了解决它，您需要确保使用了正确的 IP 地址。

首先，您应该确保移动设备上已加载 ondeviceUI，因为网络 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"

Storybook 保持加载状态以响应本机？

Storybook keep in loading status for react native?

react-native

storybook