如何使用自定义钩子在 React Native 中显示加载器

Question

我尝试创建一个自定义挂钩来在本机反应中显示加载程序。但加载器组件中的状态并未更新。

这就是我尝试实现自定义钩子的方法。但是当我在 useLoader.js 中调用 showHoverloader() 时，HoverLoading.js 中的 isHoverLoaderVisible

没有更新

useLoader.js

import {useEffect, useState} from 'react';

function useLoader() {
  const [isHoverLoaderVisible, setIsHoverLoaderVisible] = useState(false);
  const showHoverloader = value => {
    setIsHoverLoaderVisible(value);
  };

  return {isHoverLoaderVisible, showHoverloader};
}

export default useLoader;

HoverLoading.js

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

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

export default HoverLoading;

Answer 1

要解决此问题，您应该仅在 HoverLoading.js 中使用 useLoader 挂钩一次，并将 showHoverloader 函数作为 prop 传递下来，以触发 useLoader.js 的状态更新。以下是修改代码的方法：

useLoader.js

import { useEffect, useState } from 'react';

function useLoader() {
  const [isHoverLoaderVisible, setIsHoverLoaderVisible] = useState(false);
  const showHoverloader = (value) => {
    setIsHoverLoaderVisible(value);
  };

  return { isHoverLoaderVisible, showHoverloader };
}

export default useLoader;

HoverLoading.js

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

function HoverLoading() {
  // use showHoverloader here to set the state of the loader
  // OR
  // keep useLoader() in the parent component
  // and pass isHoverLoaderVisible as a prop to this component
  const { isHoverLoaderVisible, showHoverloader } = useLoader();
  const theme = useTheme();
  return (
    <Fragment>
      <Portal>
        {isHoverLoaderVisible && (
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              alignContent: 'center',
              backgroundColor: theme.colors.surface + '55',
            }}>
            <ActivityIndicator animating={isHoverLoaderVisible} />
          </View>
        )}
      </Portal>
    </Fragment>
  );
}

export default HoverLoading;