Перейти к основному содержимому

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

Вложение навигаторов означает отображение навигатора внутри экрана другого навигатора, например:

import React from 'react'
import { Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()

function Feed() {
  return <Text>Feed!</Text>
}

function Messages() {
  return <Text>Messages!</Text>
}

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  )
}

function Profile() {
  return <Text>Profile!</Text>
}

function Settings() {
  return <Text>Settings!</Text>
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default App

В приведенном выше примере компонент Home содержит навигатор с табами. Компонент Home также используется для экрана Home в вашем навигаторе стека внутри компонента App. Итак, здесь навигатор вкладок вложен в навигатор стека:

  • Stack.Navigator
    • Home (Tab.Navigator)
      • Feed (Screen)
      • Messages (Screen)
    • Profile (Screen)
    • Settings (Screen)

Вложенные навигаторы работают так же, как и обычные компоненты. Чтобы добиться желаемого поведения, часто необходимо вложить несколько навигаторов.

Как вложение навигаторов влияет на поведение​

При вложении навигаторов следует помнить о некоторых вещах:

Каждый навигатор хранит свою историю навигации.​

Например, когда вы нажимаете кнопку «Назад», находясь на экране во вложенном навигаторе стека, он вернется к предыдущему экрану внутри вложенного стека, даже если в качестве родителя есть другой навигатор.

У каждого навигатора свои параметры​

Например, указание опции title на экране, вложенном в дочерний навигатор, не повлияет на заголовок, отображаемый в родительском навигаторе.

Если вы хотите добиться такого поведения, см. Руководство для параметры экрана с вложенными навигаторами. Это может быть полезно, если вы визуализируете навигатор вкладок внутри навигатора стека и хотите показать заголовок активного экрана внутри навигатора вкладок в заголовке навигатора стека.

У каждого экрана в навигаторе свои параметры​

Например, любые параметры params, переданные на экран во вложенном навигаторе, находятся в prop route этого экрана и недоступны с экрана в родительском или дочернем навигаторе.

Если вам нужно получить доступ к параметрам родительского экрана с дочернего экрана, вы можете использовать React Context, чтобы предоставить параметры дочерним элементам.

Действия навигации обрабатываются текущим навигатором и всплывают, если не могут быть обработаны​

Например, если вы вызываете navigation.goBack() во вложенном экране, он вернется в родительский навигатор только в том случае, если вы уже находитесь на первом экране навигатора. Другие действия, такие как navigate, работают аналогично, то есть навигация будет происходить во вложенном навигаторе, и если вложенный навигатор не может ее обработать, то родительский навигатор попытается ее обработать. В приведенном выше примере при вызове navigate('Messages') внутри экрана Feed вложенный навигатор вкладок будет обрабатывать его, но если вы вызываете navigate('Settings'), родительский навигатор стека будет обрабатывать его.

Done​

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!