Блог

Не совсем понимаю, как это происходит, я, по-видимому, ввел все свои реквизиты, но я пытаюсь передать навигатор своему компоненту нижней панели, чтобы я мог перемещаться onPress .

Сначала я объявляю интерфейс реквизита:

 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 это функция. Так что же здесь происходит?

Возможно, вам нужно объявить навигацию в своем интерфейсе, например так:

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