Преобразуйте загрузочный HOC, чтобы использовать крючки и избежать проблем с навигацией.

Question

Я сделал HOC для показа мод загрузки при загрузке моего компонента.

export const withLoading = (Component) => {
    return function HOCLoading(props) {
        const [isLoading, setIsLoading] = useState(false)
        return (
            <>
                <Component
                    {...props}
                    isLoading={isLoading}
                    setIsLoading={setIsLoading}
                />
                <Loading isLoading={isLoading} />
            </>
        )
    }
}

И я использую его как

export default withLoading(MyComponent)

Он работал нормально, пока яПоймите, что navigationOptions перестал работать, что очевидно, потому что withLoading возвращает компонент, который не имеет navigationOptions, поэтому мой обходной путь был.

const LoadingMyComponent = withLoading(MyComponent)

И затем установите navigationOptions в LoadingMyComponent.

Но это выглядит плохо и не делает его проще, чем наличие состояния для загрузки и рендеринга Loading.

Есть ли способ превратить этот HOC в реакционные хукиили сделать что-то, что я не связываю с navigationOptions, а также инкапсулирует компонент и логику Loading.