Storybook Addon React Native Server

通过 WebSockets 同步多个设备

安装

请注意，此软件包适用于 Storybook 7 及更高版本。

首先，安装软件包。

npm install --save-dev @storybook/addon-react-native-server

然后，在 .storybook/main.js 中将其注册为插件。

// .storybook/main.ts

const config = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    '@storybook/addon-react-native-server', // 👈 register the addon here
  ],
  reactNativeServerOptions: {
    host: "localhost",
    port: 7007,
  },
};

export default config;

使用

安装插件后，它会自动启动一个 Websocket 服务器来监听来自移动设备的事件。您必须定义 reactNativeServerOptions 并处于开发模式才能启动服务器。

服务器运行后，您可以重新加载移动设备以确保它连接到 Websocket 服务器。

您还可以使用 @storybook/addon-react-native-web 确保您的故事的 Web 版本在浏览器中渲染。

您可以使用 deviceOnly 参数来避免渲染某些或所有故事，具体取决于您是在故事级别还是全局级别添加该参数。

parameters: { deviceOnly: true },

开发

开发脚本

• npm run start 以观察模式运行打包并启动 Storybook
• npm run build 构建和打包您的插件代码

服务器代码位于 src/preset.ts 中。