ReactNative：TypeError：this.props.navigation.navigate 不是函数

Question

不太确定这是怎么发生的，我似乎已经输入了我所有的道具，但我试图将 navigator 传递给我的底部栏组件，以便我可以导航onPress 。

首先我声明 props 接口：

export interface BottomBarProps {
    owner: string;
    navigation: NavigationProp<ParamListBase>;
}

然后是类组件：

class BottomBar extends React.Component<any, any> {

    constructor() {
        super({});

        this.state = {
            loaded: false,
        }
    }

    navigateTo(page : string) {
        if (this.props.owner == page) {
            return;
        }

        this.props.navigation.navigate(page)
    }

    render() {
        return (
            <Appbar style={styles.bottom}>
                <Appbar.Action color={this.props.owner == "home" ? "white" : "#311b92"} icon="home" size={iconSize} onPress={() => this.navigateTo("home")} />                <Appbar.Action color={this.props.owner == "profile" ? "white" : "#311b92"} icon=“profile” size={iconSize} onPress={() => this.navigateTo("profile")} />
            </Appbar>
        );
    }
}

console.log(this.props.navigation结果：

Object {
  "navigation": Object {
    "addListener": [Function addListener],
    "canGoBack": [Function canGoBack],
    "dispatch": [Function dispatch],
    "getParent": [Function getParent],
    "getState": [Function anonymous],
    "goBack": [Function anonymous],
    "isFocused": [Function isFocused],
    "navigate": [Function anonymous],
    "pop": [Function anonymous],
    "popToTop": [Function anonymous],
    "push": [Function anonymous],
    "removeListener": [Function removeListener],
    "replace": [Function anonymous],
    "reset": [Function anonymous],
    "setOptions": [Function setOptions],
    "setParams": [Function anonymous],
  },
  "route": Object {
    "key": "Home-0RS-tZ-9F2bbVZQ61Hb3a",
    "name": "Home",
    "params": undefined,
    "path": undefined,
  },
}

确实可以看出navigate是一个函数。 那么这里发生了什么？

Answer 1

您可能需要在界面中声明导航，如下所示：

export interface BottomBarProps {
    owner: string;
    navigation: NavigationProp<ParamListBase>;
    navigate?: YourTypeHere;
}