Мы создали социальное приложение для краудсорсинга мнений.У пользователей есть лента, профиль, группы и все такое.
У нас есть нижняя панель вкладок, в которой есть кнопки для сцен с вкладками, упомянутых ниже
Сценки с вкладками
- Home
- Создать сообщение
- Поиск
- Уведомления
- Дополнительные параметры
Мы используем реакции-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>