Storybook 擴充套件 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 來確保您的故事的網頁版本在瀏覽器中呈現。

您可以使用 deviceOnly 參數，根據您是在故事層級還是全域層級新增參數來避免呈現部分或全部故事。

parameters: { deviceOnly: true },

開發

開發腳本

• npm run start 以監看模式執行打包並啟動 Storybook
• npm run build 建置並打包您的擴充套件程式碼

伺服器的程式碼位於 src/preset.ts 中。