如何在react-native-router-flux的标题中使用OptionsMenu(来自react-native-options-menu)?

时间:2019-03-18 17:52:07

标签: javascript react-native react-native-router-flux

我想将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;

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

1 个答案:

答案 0 :(得分:0)

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