使用react-native-router-flux不能正确显示navBar和选项卡

Question

目前，我的routes.js中具有以下结构：

 <Router>
                <Scene key="root" hideNavBar>
                    <Stack key="Auth" initial={!this.state.isLoggedIn}>
                        <Scene key="Login" hideNavBar component={Login} title="Login" />
                    </Stack>
                    <Stack key="Main" initial={this.state.isLoggedIn}>
                        <Scene drawer key="NavDrawer" hideNavBar contentComponent={() => <NavDrawer username={this.state.userName} />} type={ActionConst.REPLACE} panHandlers={null}>
                            <Scene tabs={true} hideNavBar={false} navBar={() => <PageHeader title='Home'/>} key="homeTab" tabBarPosition='top' tabBarStyle={styles.tabBar} lazy={true} drawerLockMode={'locked-closed'}>
                                <Scene key="Home" hideNavBar component={Home} title={"Home"} />
                                <Scene key="itemDescription" hideNavBar component={itemDescription} title="Item Description" back />
                            </Scene>
                            <Scene key="helpTab" title="Help" drawerLockMode={'locked-closed'}>
                                <Scene key="Help" hideNavBar component={Help} title={"Help"} />
                            </Scene>
                            <Scene key="settingTab" title="Settings" drawerLockMode={'locked-closed'}>
                                <Scene key="Setting" hideNavBar component={Setting} title={"Setting"} />
                            </Scene>
                            <Scene key="QRTab" title="QR" drawerLockMode={'locked-closed'}>
                                <Scene key="QRScanner" hideNavBar component={QRScanner} title={"QR Scanner"} />
                            </Scene>
                        </Scene>
                    </Stack>
                </Scene>
            </Router>

问题出在homeTab上，自定义的navBar （或任何navBar）将不会显示。 如果我尝试删除hideNavBar从每个孩子的场景，它只是呈现navBar下面的tabs 。

谁能建议一种更好的组织方式？ 我对React Native和RNRF非常了解。

提前致谢！ :)

Answer 1

在对结构进行了一段时间的修改之后，该结构代表了我想要在逻辑上和美学上达到的最佳效果。 但是我对代码的外观不太满意。 如果有人有任何建议可以用更漂亮的代码实现相同的逻辑和外观，请告诉我:)

<Router>
                <Scene key="root" hideNavBar>
                    <Stack key="Auth" initial={!this.state.isLoggedIn}>
                        <Scene key="Login" hideNavBar component={Login} title="Login" />
                    </Stack>
                    <Stack key="Main" initial={this.state.isLoggedIn}>
                        <Scene drawer key="NavDrawer" hideNavBar contentComponent={() => <NavDrawer username={this.state.userName} />} type={ActionConst.REPLACE} panHandlers={null}>
                            <Scene key="homeTab" navBar={() => <PageHeader title='Home' />} drawerLockMode={'locked-closed'}>
                                <Scene tabs={true} tabBarPosition='top' tabBarStyle={styles.tabBar} lazy={true}>
                                    <Scene key="Home" hideNavBar component={Home} title={"Home"} />
                                </Scene>
                                <Scene key="itemDescription" hideNavBar component={itemDescription} title="Item Description" back />
                            </Scene>
                            <Scene key="helpTab" navBar={() => <PageHeader title='Help' />} title="Help" drawerLockMode={'locked-closed'}>
                                <Scene>
                                    <Scene key="Help" hideNavBar component={Help} title={"Help"} />
                                </Scene>
                            </Scene>
                            <Scene key="settingTab" navBar={() => <PageHeader title='Settings' />} title="Settings" drawerLockMode={'locked-closed'}>
                                <Scene>
                                    <Scene key="Setting" hideNavBar component={Setting} title={"Setting"} />
                                </Scene>
                            </Scene>
                            <Scene key="QRTab" navBar={() => <PageHeader title='QR Scanner' />} title="QR" drawerLockMode={'locked-closed'}>
                                <Scene>
                                    <Scene key="QRScanner" hideNavBar component={QRScanner} title={"QR Scanner"} />
                                </Scene>
                            </Scene>
                        </Scene>
                    </Stack>
                </Scene>
            </Router>