react-native - Storybook 保持加载状态以响应 native ？

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

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

这是一个常见问题。您可以从 repo 查看此固定问题的更多详细信息.

这里的问题是移动故事书 UI 和网络故事书 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"