React Native Expo项目全局集成全屏加载组件求助

直接上可落地的实现步骤，解决你无需逐个页面添加loader的需求：

1. 创建全局加载状态Context #

新建LoaderContext.js文件，用Context统一管理加载状态：

import React, { createContext, useState, useContext } from 'react';

const LoaderContext = createContext();

export const LoaderProvider = ({ children }) => {
  const [isLoading, setIsLoading] = useState(false);

  const showLoader = () => setIsLoading(true);
  const hideLoader = () => setIsLoading(false);

  return (
    <LoaderContext.Provider value={{ isLoading, showLoader, hideLoader }}>
      {children}
    </LoaderContext.Provider>
  );
};

export const useLoader = () => useContext(LoaderContext);

2. 实现基础Loader组件 #

新建Loader.js，用Expo自带的ActivityIndicator做加载动画：

import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';

const Loader = () => {
  return (
    <View style={styles.loaderOverlay}>
      <ActivityIndicator size="large" color="#007AFF" />
    </View>
  );
};

const styles = StyleSheet.create({
  loaderOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 9999,
  },
});

export default Loader;

3. 创建全局包裹组件LoaderWrapper #

新建LoaderWrapper.js，结合Context和Loader控制显示逻辑：

import React from 'react';
import { useLoader } from './LoaderContext';
import Loader from './Loader';

const LoaderWrapper = ({ children }) => {
  const { isLoading } = useLoader();

  return (
    <>
      {children}
      {isLoading && <Loader />}
    </>
  );
};

export default LoaderWrapper;

4. 全局挂载（关键！之前未生效大概率是这里出错） #

在项目根入口文件（通常是App.js或index.js）中，用LoaderProvider包裹整个App，再用LoaderWrapper包裹导航器：

import React from 'react';
import { LoaderProvider } from './LoaderContext';
import LoaderWrapper from './LoaderWrapper';
import AppNavigator from './AppNavigator';

export default function App() {
  return (
    <LoaderProvider>
      <LoaderWrapper>
        <AppNavigator />
      </LoaderWrapper>
    </LoaderProvider>
  );
}

5. 任意页面触发加载 #

在项目任意页面或API请求中，直接用useLoader钩子控制显示/隐藏：

import React, { useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { useLoader } from './LoaderContext';

const ExampleScreen = () => {
  const { showLoader, hideLoader } = useLoader();

  const fetchData = async () => {
    showLoader();
    try {
      // 模拟API请求
      await new Promise(resolve => setTimeout(resolve, 2000));
      console.log('数据请求完成');
    } catch (error) {
      console.error('请求失败:', error);
    } finally {
      hideLoader();
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>示例页面</Text>
      <Button title="重新加载" onPress={fetchData} />
    </View>
  );
};

export default ExampleScreen;

你之前未生效的可能原因 #

• 未用Context全局管理状态：之前的Wrapper可能仅静态渲染，无法响应状态变化
• 包裹层级错误：仅包裹了导航器，但未在最外层添加Provider，导致Context无法传递
• z-index设置不足：Loader被其他组件遮挡，无法显示

内容的提问来源于stack exchange，提问作者user23257222