无法在 createStackNavigator React Navigation 4.0.5 的 defaultNavigationOptions Header 中使用挂钩

Question

我正在使用 react-navigation @4.0.5 和 react-navigation-stack @1.8.0。

我正在设置 header 属性 defaultNavigationOptions createStackNavigator 方法以设置默认值header 在多个屏幕中。

一切正常我能够正确呈现 header 但是 我不能在我的 Header 组件的代码中使用像 useState 这样的钩子。

下面是我分别如何使用 createStackNavigator 和 createSwitchNavigator 的片段。

const ContentStackNavigator = createStackNavigator(
        {
           Search: SearchScreen,
           Result: ResultScreen
        },
        {
            initialRouteName: 'Search',
            defaultNavigationOptions: {
                header: Header
            }
        }
    )

const SwitchNavigator = createSwitchNavigator({
    Init: Screens.Init,
    Content: ContentStackNavigator
}, 
{ 
  initialRouteName: 'Init'
})

我的Header只是一个普通的功能组件（以此为参考）

import React, { useState } from 'react';
import { Text } from 'react-native'

export default (props) => {

    const [myState, setMyState] = useState(false);

    return (
        <View>
            <Text>Hello</Text>
        </View>
    )
}

以下是日志：

Error: 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

我知道上面的错误与版本不匹配和钩子使用不正确有关，所以我已经测试了上面的东西。所有其他组件似乎都在工作，所以我高度怀疑这与 react-navigation 库及其 header.

有关

如果我做错了什么请纠正我，有什么解决办法？

Answer 1

正如@ashwith 在评论中提到的，我需要通过：

const ContentStackNavigator = createStackNavigator(
        {
           ...         
        },
        {
            initialRouteName: 'Search',
            defaultNavigationOptions: {
                header: <Header />  //instead of just Header
            }
        }
    )

注意：使用这种方法不会直接在 Header 组件中传递导航道具，因此我将使用以下内容：

...
header: props => <Header {...props} />
...

我希望这对以后的人有所帮助。

无法在 createStackNavigator React Navigation 4.0.5 的 defaultNavigationOptions Header 中使用挂钩

Can't use hooks inside defaultNavigationOptions Header of createStackNavigator React Navigation 4.0.5

reactjs

react-native

react-navigation

react-navigation-stack