尝试使用 Storybook 构建 React Native 应用程序时卡在启动画面答案

【问题标题】：Stuck at Splash Screen when trying to build React Native application with Storybook尝试使用 Storybook 构建 React Native 应用程序时卡在启动画面
【发布时间】：2021-06-01 13:50:04
【问题描述】：

不确定描述问题的最佳方式，但这里什么都没有。

我最近初始化了一个 React Native 项目，在将 Storybook 添加到项目后，我在本地构建应用程序时无法再通过启动屏幕。

我可以确认 Storybook 是问题的根源，因为如果我在 index.js 文件中注释掉 Storybook，我就能够呈现应用程序。在新渲染后取消注释后，Storybook 会按预期工作。

有没有人知道这里可能发生了什么？我看到的唯一警告如下：

WARN 从 Storybook v5.3.0 开始，我们需要手动传递 asyncStorage 属性。传递 null 以禁用或使用来自 @react-native-community 或 react-native 本身的一个。

感谢您的任何帮助！

【问题讨论】：

标签： react-native storybook

【解决方案1】：

在storybook/index.js 中尝试以下操作：

// Hide the splashscreen
import SplashScreen from "react-native-splash-screen";
SplashScreen.hide();

【讨论】：

【解决方案2】：

我也遇到了同样的问题

故事书/index.js

我这样添加了useEffect：

import {AppRegistry} from 'react-native';
import React, {useEffect} from 'react';

import {getStorybookUI, configure, addDecorator} from '@storybook/react-native';
import {withKnobs} from '@storybook/addon-knobs';
import RNBootSplash from 'react-native-bootsplash';

import './rn-addons';

addDecorator(withKnobs);

configure(() => {
    require('./stories');
}, module);

const StorybookUI = getStorybookUI({});

export default function StorybookUIRoot() {
    useEffect(() => {
        setInterval(() => {
            RNBootSplash.hide({fade: true});
        }, 1500);
    }, []);
    return <StorybookUI />;
}

AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);

【讨论】：