Question

目前我的routes.js中有这个结构：

envp

问题在homeTab上，自定义LANG=en_US.UTF-8（或任何导航栏）都不会显示。如果我尝试从每个子场景中删除<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>，它只会呈现navBar低于hideNavBar。

有人能建议更好的组织方式吗？我是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和tabs无法正确显示

1 个答案: