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

Question

我的 RNNv2 顶部栏中有一个自定义组件“菜单按钮”。我希望 openMenu() 在单击此按钮时运行，但这不会发生。我的打字稿 linting 告诉我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 (
              ...
        );
    }
}

参考我的passProps代码来自：https ://github.com/wix/react-native-navigation/issues/3648

Answer 1

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 改进它