我已经开始在我的一个应用程序中使用 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
最佳答案
我设法通过更改 index.js
解决了这个问题
// storybook/index.js
const StorybookUIRoot = getStorybookUI({
// Add the line below
host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0'
});
关于javascript - 故事书导航侧边栏卡住加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66718116/