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

Question

我的 RNNv2 顶栏中有一个自定义组件“MenuButton”。我希望 openMenu() 在单击此按钮时运行，但这不会发生。我的 typescript linting 告诉我 typeof Home 上不存在属性 openMenu。这是为什么？

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