故事书导航侧边栏卡住加载

Posted

技术标签:

【中文标题】故事书导航侧边栏卡住加载【英文标题】:Storybook Navigation Sidebar stuck loading 【发布时间】:2021-06-17 10:46:39 【问题描述】:

我已经开始在我的一个应用程序中使用 Storybook for React Native,它对我帮助很大,但用于在组件之间导航的侧边栏似乎卡住了加载(向我展示了一个骨架动画)。我还尝试在新的 React Native 应用程序上运行故事书,但问题仍然存在(仅在 android 上测试)。

这是 stpries UI 的索引文件

// if you use expo remove this line
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('../src/components/Stories/Button.stories');
, module);

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// 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;

这里是 rn 附加组件,这些已经包含在内。

import '@storybook/addon-ondevice-actions/register';
import '@storybook/addon-ondevice-knobs/register';

这些是一些按钮组件的故事(将省略一些代码)

import * as React from 'react';
import storiesOf from '@storybook/react-native';
import BufferView from './decorators';

import BeexButton from '../Buttons/BeexButton';
import SocialButton from '../Buttons/SocialButton';

storiesOf('Button', module)
  .addDecorator(BufferView)
  .add('default primary', () => <BeexButton text="Primary Button" />);

仅供参考,这是我访问localhost:7007时浏览器选项卡的外观(与终端输出匹配,此站点的控制台没有输出任何错误)

我已经尝试过这个解决方案:https://github.com/storybookjs/react-native/issues/55#issuecomment-640164800

【问题讨论】:

【参考方案1】:

我设法通过更改 index.js 解决了这个问题

// storybook/index.js

const StorybookUIRoot = getStorybookUI(
  // Add the line below
  host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0'
);

【讨论】:

以上是关于故事书导航侧边栏卡住加载的主要内容,如果未能解决你的问题,请参考以下文章

在Vue 3中单击路由器链接时如何在不重新加载页面的情况下切换侧边栏

如何一起使用底部导航栏和侧边导航栏,我的侧边导航按钮不显示,而是底部导航

Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件(导航栏到侧边栏)

Bootstrap 4 固定顶部导航和固定侧边栏

如何使用侧边栏将引导导航栏修复到顶部

切换侧边栏时如何在导航栏中移动/动画文本值