Как я могу разместить свой сборник рассказов на React Native в Интернете?

Я использую React Native Storybook, который запускает Storybook в эмуляторе Native.

В дополнение к тому, как React Native Storybook работает в настоящее время, я также хотел бы создать его экземпляр для Интернета в качестве справочного компаньона для нашего приложения.

Я использую "@storybook/react-native": "5.3.14". Мои истории находятся по адресу ./storybook.


person Elise Chant    schedule 15.03.2020    source источник


Ответы (1)


Установите react-native-web, @storybook/react и babel-plugin-react-native-web из npm в корень вашего проекта.

Добавьте новый каталог конфигурации для Storybook, скажем ./.storybook-website. Внутри этого каталога добавьте main.js. В противном случае это создание было бы выполнено мастером установки Storybook.

my-app
├── .storybook-website
│   └── main.js
└── // .... rest of your app

Добавьте в main.js следующий контент:

module.exports = {
  stories: ['../storybook/stories/index.js'],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
      // make sure we're rendering output using **web** Storybook not react-native
      '@storybook/react-native': '@storybook/react',
      // plugin-level react-native-web extensions
      'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web',
      // ... 
    };
    // mutate babel-loader
    config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
    // console.dir(config, { depth: null });
    return config;
  },
};

Обновите путь stories в main.js до местоположения вашей существующей корневой истории.

Наконец, добавьте скрипты запуска в свой package.json:

"storybook:web": "start-storybook -p 6006 --config-dir ./.storybook-website",
"storybook-build:web": "build-storybook --config-dir ./.storybook-website --output-dir dist-storybook-website --quiet"

Престо! Запустите с yarn storybook:web. Это запустит сервер разработки сборников рассказов, откроет браузер, показывающий то, что вы обычно видите в эмуляторе устройства.

person Elise Chant    schedule 15.03.2020
comment
вы знаете, действительно ли это по-прежнему для текущей версии сборника рассказов? Я не нашел много информации о том, как настроить его для браузера с помощью react-native-web. - person vaz; 26.03.2020
comment
Текущая версия Storybook for RN по-прежнему основана на v4, так что да. - person Elise Chant; 04.04.2020
comment
пытался сделать это в случае сборника рассказов v5 +, и он вообще не регистрирует мои истории (Использование: `` import {storiesOf} from '@ storybook / react'; ``), но ничего не работает - person Velidan; 29.05.2020
comment
start-storybook был заменен на @ storybook / react-native-server или @ storybook / react-native. Чтобы решить сборник рассказов: веб-скрипт, я заменил start-storybook на node_modules/@storybook/react/bin/index.js - person Manu Rauck; 21.03.2021