获取元素类型无效:应为字符串，但已获取: undefined.Check 'HeaderBackButton‘的render方法

Question

当我从一个屏幕导航到另一个屏幕时，我遇到了一个错误，但当有人将我的分支拉到他们的机器上时，应用程序运行得非常好。

 Error:Element type is invalid -- expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You likely forgot to
export your component from the file it's defined in. Check the render method of
`HeaderBackButton`.

环境：：

node -v
v12.8.0

npm -v
6.14.8

其他包：

"dependencies": {
        "@react-native-community/async-storage": "^1.12.0",
        "@react-native-community/masked-view": "0.1.10",
        "@react-navigation/native": "5.6.1",
        "@react-navigation/stack": "^5.9.0",
        "i18next": "19.5.2",
        "react": "16.11.0",
        "react-i18next": "11.7.0",
        "react-native": "0.62.2",
        "react-native-camera": "3.31.0",
        "react-native-config": "1.2.1",
        "react-native-gesture-handler": "1.6.1",
        "react-native-get-random-values": "1.4.0",
        "react-native-location": "2.5.0",
        "react-native-modalize": "2.0.5",
        "react-native-reanimated": "1.9.0",
        "react-native-safe-area-context": "3.0.7",
        "react-native-screens": "2.9.0",
        "react-native-svg": "12.1.0",
        "ts-action": "11.0.0",
        "use-context-selector": "1.1.2",
        "uuid": "8.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/runtime": "^7.6.2",
        "@react-native-community/eslint-config": "^0.0.5",
        "@types/jest": "^26.0.3",
        "@types/react": "^16.9.38",
        "@types/react-native": "^0.62.13",
        "@types/react-test-renderer": "^16.9.2",
        "@types/uuid": "^8.0.0",
        "@typescript-eslint/eslint-plugin": "^3.9.1",
        "@typescript-eslint/parser": "^3.9.1",
        "babel-jest": "^24.9.0",
        "babel-plugin-module-resolver": "^4.0.0",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-plugin-react": "^7.20.6",
        "eslint-plugin-react-hooks": "^4.1.0",
        "eslint-plugin-react-native": "^3.8.1",
        "husky": "^4.2.5",
        "jest": "^24.9.0",
        "lint-staged": "^10.2.11",
        "metro-react-native-babel-preset": "^0.58.0",
        "prettier": "^2.0.5",
        "react-native-fast-image": "^8.1.5",
        "react-test-renderer": "16.11.0",
        "ts-jest": "^26.1.1",
        "tslint": "^6.1.2",
        "typescript": "^3.9.5"
    }

Answer 1

如果您正在使用v6

npm install @react-navigation/elements

import { HeaderBackButton } from '@react-navigation/elements'

       <Stack.Navigator>
                    <Stack.Screen
                        name="Home"
                        component={HomeScreen}
                        options={({ navigation, route }) => ({
                            headerLeft: props => (
                                <HeaderBackButton
                                    {...props}
                                    onPress={() => {
                                        navigation.navigate('Another Screen');
                                    }}
                                />
                            )
                        })}
                    />
                </Stack.Navigator>