Question

我们创建了一个社交应用程序以众筹观点。用户有一个提要，个人资料，组等等。

我们有一个底部的标签栏，其中有用于以下提到的选项卡式场景的按钮

标记的场景

首页
创建帖子
搜索
通知
更多选项

我们正在使用react-native-router-flux进行导航。

当前设置

在当前设置下，选项卡栏仅对“选项卡式”场景可见。单击另一个场景时，它们具有自己的导航（配置文件，组等）。尽管选项卡栏在其他场景中不可见，但一切正常。

预期行为

每当用户导航到任何场景时，“选项卡”栏和“选项卡”场景都应仅安装一次。每个其他场景（配置文件，组等）应具有自己的导航堆栈。单击后退按钮时，需要将它们卸下。所有场景都应具有标签栏。

每当单击任何选项卡按钮时，都需要重置导航堆栈。

App.js显示如下

<Provider store={store}>
            <RouterWithRedux>

                <Scene hideNavBar key='root'>

                    {/*Login authentication is handled here*/}
                    <Scene initial={true} key="placeholder" component={Placeholder}/>

                    <Scene key="auth">
                        <Scene hideNavBar key="landing" component={LandingPageContainer}/>
                        <Scene key="cookiePolicy" component={CookiePolicy}/>
                        <Scene key="privacyPolicy" component={PrivacyPolicy}/>
                        <Scene key="termsPolicy" component={TermsAndConditions}/>
                    </Scene>

                    <Scene key="traitsSelect" component={TraitsPageContainer} hideNavBar/>

                    <Scene key='main'>
                        <Tabs
                            key="tabbar"
                            showLabel={false}
                            tabBarComponent={BottomNavigation}
                            tabBarPosition="bottom"
                            animationEnabled={false}
                            lazy
                            hideNavBar
                        >

                            <Scene key="home" component={HomePageContainer} navBar={HomePageNavBar}/>
                            <Scene key="search" component={SearchPageContainer} navBar={SearchNavBar}/>
                            <Scene key="moreNavigation" component={MoreNavigationContainer} hideNavBar/>
                            <Scene key="notifications" component={NotificationsContainer}
                                   title="Notifications"/>
                        </Tabs>

                        {/*Need everything below this inside tabs*/}

                        {/*Intro*/}
                        <Scene key="intro" component={Intro} hideNavBar/>

                        {/*Groups*/}
                        <Scene key="myGroups" component={MyGroupsContainer} title='My groups'/>
                        <Scene key="aboutGroup" component={AboutGroupContainer} navBar={MyGroupsNavBar}/>
                        <Scene key="editGroup" path="/editGroup/:userIdParam" component={EditGroupContainer}
                               title='Pending posts in group'/>
                        <Scene key="editGroupMember" path="/editGroupMember/:userIdParam"
                               component={EditGroupMembersContainer} title='Add members'/>
                        <Scene key="createGroup" component={CreateGroupContainer}
                               navBar={CreateGroupNavBar}/>
                        <Scene key="addFriendsToGroup" component={AddFriendsToGroup} hideNavBar/>
                        <Scene key="inviteCode" component={InviteCodeContainer} navBar={InviteCodeNavBar}/>
                        <Scene key="editGroupInfo" path="/editGroupInfo/:userIdParam"
                               component={EditGroupDetailsContainer} navBar={DetailGroupNavBar}/>
                        <Scene key="groupPost" component={PostGroupContainer}/>
                        <Scene key="groupdetail" component={DetailGroupContainer} title='Manage members'/>

                        {/*Profile*/}
                        <Scene key="profile" path="/profile/posts/:userIdParam"
                               component={PostProfileContainer}/>
                        <Scene key="aboutProfile" path="/profile/about/:userIdParam"
                               component={AboutProfileContainer}/>
                        <Scene key="reviewers" path="/profile/reviewers/:userIdParam"
                               component={ReviewersProfileContainer} title="Reviewers"/>

                        {/*Create post*/}
                        <Scene key="createPostSelectType" hideNavBar component={CreatePostSelectType}/>
                        <Scene key="createPost" component={CreatePostContainer} title='Create post'/>
                        <Scene key="createAnonymousPost" component={CreateAnonymousPostContainer}/>

                        {/*Settings*/}
                        <Scene key="settings" component={SettingsContainer}/>
                        <Scene key="changePersonality" component={ChangePersonalityTraitsContainer}
                               hideNavBar/>
                        <Scene key="changePassword" component={ChangePasswordContainer} hideNavBar/>

                        {/*Comments*/}
                        <Scene key="comments" path="/comments/:postIdParam" component={CommentsContainer}
                               title="Comments"/>
                        <Scene key="pendingComments" path="/pending_comments/:userIdParam"
                               component={PendingCommentsContainer} title="Pending comments"/>

                        {/*Posts*/}
                        <Scene key="pendingPosts" component={PostReviewContainer} back
                               title='Awaiting approval'/>
                        <Scene key="singlePost" component={SinglePagePostContainer}/>

                        {/*Points*/}
                        <Scene key="rewards" component={RewardsPageContainer} title='Rewards program'/>
                        <Scene key="referrals" component={ReferralsPageContainer} title='Refer users'/>

                        <Scene key="bannedUsers" component={BannedMembersContainer} title="Banned users"/>
                        <Scene key="ratePersonality" component={RatePersonalityContainer}/>

                    </Scene>
                </Scene>
            </RouterWithRedux>
        </Provider>

在React Native中使用React-Native-Router-Flux将标签栏添加到具有自己的导航堆栈的子场景中

0 个答案: