如何在react-native-router-flux标题中使用OptionsMenu（来自react-native-options-menu）？

Question

我想将OptionsMenu中的react-native-options-menu菜单与react-native-router-flux的标题组件一起使用。这是我的方法

MenuOptions.js：

import React from 'react';
import OptionsMenu from "react-native-options-menu";
import Icon from "react-native-vector-icons/Ionicons";

const MenuOptions = () => {
    const myIcon = (<Icon name="rocket" size={30} color="#900" />);
    return(
        <OptionsMenu
            customButton={myIcon}
            destructiveIndex={1}
            options={["Edit", "Delete", "Cancel"]}
        />
    );
}

export default MenuOptions;

Router.js：

import ...
import MenuOptions from "./components/MenuOptions";
const RouterComponent = () => {
    return (
        <Router>
            <Scene key="root" hideNavBar>

                <Scene key="auth">
                    <Scene key="login" component={LoginForm} title="Please login" initial />
                </Scene>

                <Scene key="main">
                    <Scene 
                    key="..." 
                    component=... 
                    title="..." 
                    rightTitle="More"
                    onRight={()=> {
                        return <MenuOptions />
                    }}
                    initial
                    />
                    <Scene> ... </Scene>
                </Scene>

            </Scene>
        </Router>
    );
}

export default RouterComponent;

当我单击更多时，不会加载菜单选项。我的方法有什么问题？有谁有更好的解决方案？

Answer 1

使用renderRightButton = {<OptionsMenu ../>}代替onRight，renderRightButton等待组件，而onRight等待函数。