React native - как сохранить TabNavigator на каждом экране

Я использую комбинацию навигатора вкладок, навигатора стека и переключателя nagivator в моем собственном приложении для реакции с react-navigation.

Это работает хорошо, за исключением того, что я хотел бы сохранить нижние вкладки на каждом экране. В настоящее время, если я перехожу на UserProfile экран, нижние вкладки исчезают.

App.js:

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  MyProfile: { screen: ProfileScreenStack },
});

const UserStack = createStackNavigator(
  { 
    UserProfile: { screen: userProfile },
    Comments: { screen: comments }
  }
);

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    User: UserStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

Чтобы решить эту проблему, я попытался сделать компонент из навигатора вкладок и просто импортировать его в userProfile.js, например <BottomTab />.

bottomTab.js:

const BottomTab = createBottomTabNavigator({
    Feed: { screen: FeedScreenStack },
    MyProfile: { screen: ProfileScreenStack },
})

export default BottomTab

но это не работает, потому что в react-navigation 3 мне нужно настроить контейнер приложения напрямую, и я не уверен, как это обойти. Единственное другое решение, которое я могу придумать, - это создать настраиваемый компонент, который представляет собой просто панель с кнопками, указывающими на разные страницы, но мне интересно, могу ли я просто использовать TabNavigator?


react-native reactjs navigator react-navigation tabnavigator
person JAM    schedule 20.03.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Рекомендуется использовать TabNavigation как верхний элемент в стеке навигации. На каждой из вкладок у вас может быть своя StackNavigation. Если вы используете SwitchNavigation для Auth, что, вероятно, означает экран входа в систему, вы можете поместить SwitchNavigation вверху с двумя дочерними Auth и Tab и включить Home, User, Feed и т. Д. В разные StackNavigations, которые являются дочерними для TabNavigation. Вы можете изменить, например, следующее:

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  User: { screen: UserStack },
});

const UserStack = createStackNavigator({ 
  UserProfile: { screen: userProfile },
  Comments: { screen: comments },
  MyProfile: { screen: ProfileScreenStack },
});

const MainStack = createSwitchNavigator({
  Home: TabStack,
  Auth: AuthStack
},
{
  initialRouteName: 'Home'
});
person Christian    schedule 20.03.2019
comment
У меня это не работает, потому что User - это экран, к которому можно перейти, щелкнув по одному из пользователей в Feed, это не отдельный экран. Поэтому изначально у меня был UserStack сам по себе. И да, Auth для входа в систему - person JAM; 21.03.2019
comment
тогда вам нужно добавить User также в свой FeedScreenStack. Если вы хотите переключить вкладку в этом случае, вам нужно будет переключить и навигацию по вкладкам, что раздражает пользователей, я бы не рекомендовал это. - person Christian; 21.03.2019
comment
Если вы хотите переключить вкладку в этом случае, вам также нужно будет переключить навигацию по вкладкам, что раздражает пользователей, я бы не рекомендовал это, я не понимаю, можете ли вы уточнить, в чем именно проблема? Если вы имеете в виду, когда я переключаюсь с MyProfile обратно на Feed, я приземляюсь на UserProfile, и мне нужно нажать кнопку "Назад", чтобы полностью вернуться к Feed, тогда, я думаю, у нас могут быть разные мнения по UX. Или это вообще не рекомендуется? - person JAM; 21.03.2019
comment
Я прочитал Руководство по человеческому интерфейсу iOS таким образом, и я не помню, чтобы видел переключение вкладки из-за действия на вкладке, но, конечно, вы можете сделать это, если считаете, что это лучше подходит для вашего варианта использования. Я лично ожидал бы Stack-Navigation с push и pop внутри каждой вкладки, но это, вероятно, зависит от случая. - person Christian; 21.03.2019
comment
И ваша рекомендация - всегда иметь TabNavigator в качестве верхнего элемента внутри SwitchNavigator? - person JAM; 21.03.2019
comment
если вы используете SwitchNavigator для переключения между входом в систему и обычным использованием приложения, это вариант, но TabNavigator должен быть сверху, чтобы всегда оставаться видимым во вложенных компонентах. Вы также можете использовать один StackNavigator и модальные компоненты, но вы просили, чтобы TabNavigator всегда был видимым. - person Christian; 21.03.2019