0

我是 react native 世界的新手，我想在我的应用程序中从左侧显示侧面菜单，我正在使用 react-native-navigation 这样做，但我面临着总和问题

首先，我将导航根设置如下：-

Navigation.setRoot({
        root: {

            bottomTabs: {
                children: [
                    {
                        stack: {
                            children: [
                                {
                                    component: {
                                        name: "FindPlace",
                                        options: {
                                            bottomTab: {
                                                text: "find place",
                                                icon: response[0],
                                            },
                                            topBar: {
                                                title: {
                                                    text: "find place"
                                                },
                                                leftButtons: [
                                                    {
                                                        icon: response[2],
                                                        id: 'leftSideDrawer',
                                                    },
                                                ],
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    },

                ],
            },
            sideMenu: {
                left: {
                    component: {
                        name: 'SideDrawer',
                        id: 'leftSideDrawer'
                    }
                },

            },

        }
    })

我在其中声明了 bottomTabs 和 sideMenu，并在 findPlace 组件上添加了一个触发事件的按钮，我在其中添加了一个 Navigation.event() 列表器来切换我的左侧菜单的可见性，如下所示：-

 constructor(props) {
    super(props);
    Navigation.events().bindComponent(this)
}

navigationButtonPressed({ buttonId }) {

    Navigation.mergeOptions('leftSideDrawer', {
        sideMenu: {
          left: {
            visible: true
          }
        }
  });


}

但这根本不起作用，它只显示一个空白屏幕，如果从 setRoot 中删除 sideMenu 部分，它将显示底部标签，当我再次添加 sideMenu 时，它会显示一个空白屏幕。

在 RNN 版本 2 文档上没有关于此的示例我搜索了很多我没有找到任何可以帮助我解决这个问题的东西所以请让我知道我做错了什么，这样我就可以摆脱这些东西

提前致谢 ！！

4

1 回答 1

1

它通过将bottomTabs内部置于sideMenu层次结构的根部来工作。还有sideMenu一个center字段是必需的。文档说：

center是必需的，包含主应用程序，它需要有一个 topBar aka stack。

代码必须按如下方式实现：

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    id: "leftSideDrawer",
                    name: "SideDrawer"
                }
            },
            center: {
                bottomTabs: {
                    children: [
                        {
                            component: {
                                name: "FindPlace",
                                options: {
                                    bottomTab: {
                                        text: "find place",
                                        icon: response[0]
                                    },
                                    topBar: {
                                            title: {
                                            text: "find place"
                                        },
                                        leftButtons: [
                                            {
                                                icon: response[2],
                                                id: "leftSideDrawer",
                                            },
                                        ],
                                    }
                                }

                            }
                        }

                    ],
                }
            }

        }
    }
});

使用此结构使其工作。请注意，如果您需要推送其他屏幕，那么您需要使用堆栈。

于 2020-01-10T15:56:58.427 回答