使用 react-native-router-flux 导航栏和选项卡无法正确显示

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（或任何导航栏）都不会显示。如果我尝试从每个子场景中删除 hideNavBar，它只会在 tabs.

下方呈现 navBar

谁能提出更好的组织方式？我是 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>

使用 react-native-router-flux 导航栏和选项卡无法正确显示

navBar and tabs doesn't show correctly using react-native-router-flux

tabs

navbar

reactjs

react-native

react-native-router-flux