navBar и вкладки не отображаются правильно при использовании response-native-router-flux

Question

В настоящее время у меня есть такая структура в моем rout.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>