时间戳

首页 > 解决方案 > React Native Loader 在每个组件或根目录中？

javascript - React Native Loader 在每个组件或根目录中？

问题描述

我们应该在每个 Component 中使用 Loader 组件（任何自定义 Loader）并使用专用的 state reducer 变量通过相关 API 调用来切换它，还是应该在应用程序的根目录中使用 Loader 并在任何 API 实例上切换它？

如果我们使用根 Loader 组件，它具有属性

{position: 'absolute', top:0, bottom:0, right:0, left:0}

（全屏加载程序）。尽管它会摆脱多行代码来单独切换每个加载器组件，但如果一个 API 端点崩溃或加载时间过长，它不会阻止用户访问任何其他页面。

最佳做法是什么？

标签： javascriptreactjsreact-nativeredux

解决方案

我用自定义组件包裹了我的所有屏幕，所以我有一个包裹所有屏幕的组件，我在这个组件上显示加载：

ScreenContainer 组件：

function ScreenContainer({
    barStyle = "dark-content",
    statusBarColor = Colors.whiteFFF,
    children,
    containerStyle,
    loading = false,
    translucent = false,
}: ScreenContainerProps) {
    useFocusEffect(
        React.useCallback(() => {
            StatusBar.setBarStyle(barStyle);
            StatusBar.setBackgroundColor(statusBarColor);
            StatusBar.setTranslucent(translucent);
        }, []),
    );
    return (
        <View
            style={[
                {
                    flex: 1,
                },
                containerStyle,
            ]}
        >
            {loading ? <LoadingOverlay show={loading} /> : null}
            {children}
        </View>
    );
}

加载覆盖组件：

function LoadingOverlay({ show = false }: LoadingOverlayProps) {
    return (
        <Modal
            transparent
            visible={show}
            animated
            animationType="fade"
            presentationStyle="overFullScreen"
        >
            <StatusBar backgroundColor="rgba(0,0,0,0.3)" barStyle="light-content" />
            <View
                style={{
                    backgroundColor: "rgb(33, 33, 33)",
                    opacity: 0.4,
                    alignItems: "center",
                    justifyContent: "center",
                    flex: 1,
                }}
            >
                <TLoader />
            </View>
        </Modal>
    );
}

推荐阅读