Javascript 在每个组件或根中反应本机加载程序？

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

如果我们使用根加载器组件，并且它具有属性

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

（全屏加载器）。虽然它可以省去许多行代码来分别切换每个加载程序组件，但是如果一个API端点崩溃或加载时间过长，它不会阻止用户从任何其他页面进行加载

---

最佳做法是什么？

我用自定义组件包装了我的所有屏幕，因此我有一个包装了所有屏幕的组件，并显示此组件上的加载：

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 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>
    );
}

函数屏幕容器({
barStyle=“黑色内容”，
statusBarColor=Colors.whiteFFF，
儿童
集装箱运输，
加载=错误，
半透明=假，
}：ScreenContainerProps）{
聚焦效应(
React.useCallback（（）=>{
StatusBar.setBarStyle（条形样式）；
StatusBar.setBackgroundColor（statusBarColor）；
状态栏。设置半透明（半透明）；
}, []),
);
返回(
{正在加载？：null}
{儿童}
);
}

加载Overlay组件：

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>
    );
}

函数LoadingOverlay（{show=false}:LoadingOverlayProps）{
返回(
);
}

使用hoc组件