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 中。