React Native自定义Hook实现加载器：状态无法更新问题求助

问题根源 #

你的useLoader自定义Hook存在核心问题：每次调用useLoader都会创建独立的状态实例。当你在某个组件中调用showHoverloader()更新状态时，这个状态只属于该组件的Hook实例，而HoverLoading组件里调用useLoader拿到的是另一个完全独立的状态，自然不会同步更新。

解决方案：用Context共享状态 #

要实现全局状态同步，我们需要把Loader的状态放到Context中，让所有组件共享同一个状态实例。

步骤1：创建Loader Context

新建LoaderContext.js文件，封装状态和操作方法：

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

const LoaderContext = createContext();

export function LoaderProvider({ children }) {
  const [isHoverLoaderVisible, setIsHoverLoaderVisible] = useState(false);

  const showHoverloader = (value) => {
    setIsHoverLoaderVisible(value);
  };

  return (
    <LoaderContext.Provider value={{ isHoverLoaderVisible, showHoverloader }}>
      {children}
    </LoaderContext.Provider>
  );
}

export function useLoader() {
  return useContext(LoaderContext);
}

步骤2：修改HoverLoading组件

更新HoverLoading.js，使用共享的Context Hook：

import { Fragment } from 'react';
import { View } from 'react-native';
import { ActivityIndicator, Portal, useTheme } from 'react-native-paper';
import { useLoader } from '../../../hooks/appManagement/LoaderContext';

function HoverLoading() {
  const { isHoverLoaderVisible } = useLoader();
  const theme = useTheme();
  
  return (
    <Fragment>
      {isHoverLoaderVisible && (
        <Portal>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: theme.colors.surface + '55',
            }}>
            <ActivityIndicator animating={isHoverLoaderVisible} />
          </View>
        </Portal>
      )}
    </Fragment>
  );
}

export default HoverLoading;

步骤3：在根组件中注入Provider

在你的App根组件（如App.js）中，用LoaderProvider包裹所有需要使用Loader的组件：

import { LoaderProvider } from './hooks/appManagement/LoaderContext';
import HoverLoading from './components/HoverLoading';

function App() {
  return (
    <LoaderProvider>
      {/* 你的应用其他组件 */}
      <HoverLoading />
    </LoaderProvider>
  );
}

export default App;

步骤4：在业务组件中控制Loader

现在任何组件都可以通过useLoader拿到统一的状态和操作方法：

import { useLoader } from '../hooks/appManagement/LoaderContext';

function ExampleComponent() {
  const { showHoverloader } = useLoader();

  const fetchData = async () => {
    showHoverloader(true);
    try {
      // 执行异步请求
      await someAsyncApiCall();
    } finally {
      showHoverloader(false);
    }
  };

  return <Button onPress={fetchData}>加载数据</Button>;
}

内容的提问来源于stack exchange，提问作者Akshay K S