reactjs - 自定义组件顶部按钮事件RNN v2

我的RNNv2顶部栏中有一个自定义组件“ MenuButton”。我希望单击该按钮时运行openMenu（），但这不会发生。我的打字稿掉毛告诉我Property openMenu does not exist on typeof Home。为什么是这样？

 class Home extends React.PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        Navigation.events().bindComponent(this);
    }

    closeMenu = () => {
        this._drawer.close();
    };
    openMenu = () => {
        this._drawer.open();
    };
    static options(passProps) {
        return {
            topBar: {
                rightButtons: [
                    {
                        component: {
                            name: 'MenuButton',
                            passProps: {
                                onClick: () => this.openMenu(),
                            },
                        },
                    },
                ],
            },
        };
    }

    render() {
        return (
              ...
        );
    }
}

参考我从https://github.com/wix/react-native-navigation/issues/3648获得了passProps代码

最佳答案

openMenu是实例方法，而static options(passProps)显然是静态方法。

您的onClick是通过箭头功能（例如() => this.openMenu()）定义的，这意味着它被迫使用静态上下文。

尽管https://github.com/wix/react-native-navigation/issues/3648#issuecomment-408680892建议使用箭头功能，但我认为它不起作用。
您必须以某种方式向MenuButton提供Home组件的实例。

最肮脏的骇客如下：

let homeInstance: Home | undefined;

class Home extends React.PureComponent<Props, State> {
    constructor(props: Props) {
        super(props);
        Navigation.events().bindComponent(this);
        homeInstance = this;
    }

    closeMenu = () => {
        this._drawer.close();
    };
    openMenu = () => {
        this._drawer.open();
    };
    static options(passProps) {
        return {
            topBar: {
                rightButtons: [
                    {
                        component: {
                            name: 'MenuButton',
                            passProps: {
                                onClick: () => {
                                   if(homeInstance) {
                                      homeInstance.openMenu()
                                   } else {
                                      console.warn("homeInstance is not initialised");
                                   }
                                },
                            },
                        },
                    },
                ],
            },
        };
    }

    render() {
        return (
              ...
        );
    }
}

我们这里有一种单例，因此它不是一个完美的解决方案。我会尝试使用React.Context来改善它