React Navigation - Вложенные навигаторы

Я разрабатываю мобильное приложение с помощью React Native, и у меня возникла небольшая дилемма. У меня 2 требования:

1: Чтобы иметь возможность вернуться назад. 2: Иметь ящик (выдвижное меню)

Я использую React Navigation, которая отлично подходит для любого из двух требований, но не вместе (по крайней мере, как я это понял).

Я пробовал использовать DrawerNavigator, и он позволяет получить действительно хороший ящик. Но мне не удалось создать функцию возврата. В приложении вы должны открывать ящик и перемещаться по нему. И пока вы находитесь на одной странице и переходите к другой, у вас должна быть возможность вернуться на ту страницу, с которой вы пришли. И, как я понял, это возможно только в StackNavigator. Но в StackNavigator нет функциональности ящика.

Итак, мне интересно, какие у меня варианты?

Вложенные навигаторы? Я пробовал, но в итоге получил функцию возврата, которая перемещалась только между навигаторами, а не по страницам в StackNavigator. Поэтому я не уверен, возможно ли то, что я хочу, с вложенными навигаторами.

Другой возможностью было бы создать полностью настраиваемый компонент Drawer, который я переключаю по состоянию в родительском компоненте.

Есть ли у вас какие-нибудь советы по этому поводу?

Код, который я пробовал для вложенного навигатора:

const Nav = createDrawerNavigator({
  Home: HomeScreen,
  Single: Single,
  Tag: Tagsview,
  Privacy: Personvern,
  Search: Search,
  Contact: Contact,
  About: About,
  Login: Login,
  MostPopular: MostPopular,
  MostShared: MostShared,
  TagsSingle: TagsSingle,
  Newest: NewestImages,
}, {
  contentComponent: ({ navigation }) => (
    <NavMenu navigation={navigation} />
  ),
},
{
  drawerBackgroundColor: '#2D2D2D',
});

const RootStack = createStackNavigator({     
  Login: Login,
  Drawer: {screen: Nav}
},
{
  initialRouteName: 'Login',
  drawerBackgroundColor: '#2D2D2D',
});

person Marius W    schedule 03.07.2018    source источник
comment
Что ты пробовал? Добавьте код, чтобы лучше понять вашу проблему, потому что это должно полностью работать   -  person st4rl00rd    schedule 03.07.2018
comment
На мой взгляд, если в приложении есть выдвижное меню, у него не должно быть возможности вернуться назад, скользя. Вместо этого в верхнем левом углу должна быть кнопка / стрелка назад. Думаю, это также соответствует руководящим принципам разработки Android / iOS. Поэтому моей первой попыткой было бы убедить клиента отказаться от этой функции. Использование одного и того же жеста для двух вещей может быть относительно запутанным и нелогичным для пользователя.   -  person trixn    schedule 03.07.2018
comment
@ st4rl00rd Я добавил код настройки стека / DrawerNavigator. Значит, должна быть возможность перемещаться по страницам в DrawerNavigator с помощью функции backbutton из StackNavigator?   -  person Marius W    schedule 03.07.2018
comment
@trixn Да, полностью согласен. Мне нужна кнопка возврата из stackNavigator.   -  person Marius W    schedule 03.07.2018
comment
Только что попробовал ваш код, работает нормально, см. videosprout.com/ видео? id = 32d0eb71-e58b-49d1-baab-a78d861ed1c6; Какую версию реакции-навигации вы используете?   -  person st4rl00rd    schedule 03.07.2018
comment
@ st4rl00rd Хм. Но если вы пройдете дальше, например, на три страницы, а затем попытаетесь вернуться назад, сможете ли вы использовать кнопку возврата для каждой страницы? И открыть ящик на всех страницах? Я использовал последнюю версию   -  person Marius W    schedule 03.07.2018
comment
Я использую 2.4.1, и я могу перемещаться так дальше, как хочу, даже смог использовать три родительских верхних дочерних элемента поверх стека, он просто использует родительское состояние для централизованного управления всем навигатором через опору навигации, потому что именно так она и должна работать, можете ли вы загрузить свой проект куда-нибудь, чтобы помочь вам отладить его?   -  person st4rl00rd    schedule 03.07.2018
comment
@ st4rl00rd Хорошо, тогда я еще попробую. Сделаю это, если я не могу понять это   -  person Marius W    schedule 03.07.2018


Ответы (1)


Оказывается, код, с которым я работал, как указал @ st4rl00rd, но требовал небольшой настройки.

Итак, если вы хотите иметь как выдвижное меню, так и функцию goBack, вам нужно использовать stackNavigator с вложенным drawerNavigator, и он отлично работает.

Это код после редактирования:

const Nav = createDrawerNavigator({
  Home: HomeScreen,    
}, {
  contentComponent: ({ navigation }) => (
    <NavMenu navigation={navigation} />
  ),
},
{
  initialRouteName: 'Home',
  drawerBackgroundColor: '#2D2D2D',
});

const RootStack = createStackNavigator({
  Single: Single,
  Tag: Tagsview,
  Privacy: Personvern,
  Search: Search,
  Contact: Contact,
  About: About,
  MostPopular: MostPopular,
  MostShared: MostShared,
  Newest: NewestImages,
  TagsSingle: TagsSingle,
  Drawer: {screen: Nav}
},
{
  initialRouteName: 'Drawer',
  drawerBackgroundColor: '#2D2D2D',
});

По сути, мне нужно было поменять страницы местами. Поместите все страницы, кроме HomeScreen, в rootStack, потому что это те, к которым вы можете перейти назад в стеке. И оставьте главный экран в drawerNavigator, чтобы при переходе к «Drawer» в stackNavigator вы могли использовать функцию openDrawer.

person Marius W    schedule 04.07.2018