"Invariant Violation: Invalid hook call. hooks can only~~" 引入react-native-safe-area-context时报错

Question

我们正在开发一款使用 React-Native 的智能手机应用。我使用 react-native-safe-area-context 来获取 iPhone 12 上的缺口高度。但是，我收到以下错误：

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

This error is located at:
    in Screen (created by ConnectFunction)
    in ConnectFunction (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by CardContainer)
    in RCTView (created by CardContainer)
    in RCTView (created by ForwardRef(CardSheet))
    in ForwardRef(CardSheet) (created by Card)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (created by Card)
    in RCTView (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RCTView (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RCTView (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack (created by Context.Consumer)
    in KeyboardManager (created by Context.Consumer)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (created by Context.Consumer)
    in SafeAreaProviderCompat (created by StackView)
    in RCTView (created by StackView)
    in StackView (created by StackView)
    in StackView
    in Unknown (created by Navigator)
    in Navigator (at create-redux-container.js:93)
    in NavigatorReduxWrapper (created by ConnectFunction)
    in ConnectFunction (at AppController.js:332)
    in AppController (created by ConnectFunction)
    in ConnectFunction (at prj/index.js:16)
    in Provider (at prj/index.js:15)
    in Root (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

useSafeAreaInsets
    SafeAreaContext.tsx:104:36
Screen#getUnitTextSize
    Screen.js:804:2
Screen#constructor
    Scree.js:115:25
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
forEach
    [native code]:0
Refresh.performReactRefresh
    setUpReactRefresh.js:43:6
setTimeout$argument_0
    require.js:609:10
callFunctionReturnFlushedQueue
    [native code]:0

代码

import React, {Component} from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';

class Screen extends Component {
getNotchHeight() {
    const insets = useSafeAreaInsets();
    console.log('insets', insets);
  }
}

componentDidMount() {
    this.getNotchHeight();
  }
}

开发环境如下。

• iOS14.4(模拟器iPhone12)
• 反应：16.9.0
• react-native：0.61.5
• react-native-safe-area-context：3.2.0
• XCode：12.4 (12D4e)
• node.js：12.3.1

我尝试了以下方法。

• 在 componentDidMount 中调用
• 将 react-native-safe-area-context 的版本更改为 0 系列

如果您还有其他尝试，请告诉我们。

Answer 1

你不能在类组件中使用 Hooks，但你绝对可以将类和函数组件与 Hooks 混合在一个树中。

Answer 2

你不能在类组件中使用钩子，而不是使用类组件，你可以将钩子与功能组件一起使用。

import React, {Component,useEffect} from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';

const Screen = () => {
const getNotchHeight = ()=> {
    const insets = useSafeAreaInsets();
    console.log('insets', insets);
  }
   useEffect = (()=>{
  getNotchHeight();
  },[])
}

---

Answer 3

const Screen = () => {
const getNotchHeight = ()=> {
    const insets = useSafeAreaInsets();
    console.log('insets', insets);
  }
   useEffect = (()=>{
  getNotchHeight();
  },[])
}