Реактивная навигация - вложенные навигаторы - PullRequest
Новая
       32

Реактивная навигация - вложенные навигаторы

0 голосов
/ 03 июля 2018

Я занимаюсь разработкой мобильного приложения с использованием 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',
});

1 Ответ

0 голосов
/ 04 июля 2018

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

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

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

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», потому что это те, к которым вы можете перемещаться назад в стеке. И оставьте домашний экран в pocketNavigator, чтобы при переходе к «Drawer» в stackNavigator можно было использовать функцию openDrawer.

...