0

目前我的 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从每个子场景中删除，它只会navBar渲染tabs.

任何人都可以提出更好的组织方式吗？我是 React Native 和 RNRF 的菜鸟。

提前致谢！:)

4

1 回答 1

0

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

<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>
于 2018-05-19T03:49:53.450 回答