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

Stack навигатор - Перемещение между экранами

В предыдущем разделе Hello React Navigation мы определили навигатор стека с двумя маршрутами Home и Details, но мы не узнали, как позволить пользователю переходить от Home к Details.

Если бы это был веб-браузер, мы могли бы написать что-то вроде этого:

<a href="details.html">Go to Details</a>
<a
  onClick={() => {
    window.location.href = 'details.html'
  }}
>
  Go to Details
</a>

Мы сделаем что-то подобное, но вместо использования глобального окна window.location мы будем использовать свойство navigation, которая передается нашим компонентам экрана.

Переход к новому экрану​

src/index.js
import * as React from 'react'
import { View, Button, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
  </View>
)

const DetailsScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
  </View>
)

const Stack = createStackNavigator()

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default App

Попробуйте этот пример на Snack

Давайте разберемся с этим:

  • navigation - свойство navigation передается каждому компоненту экрана в навигаторе стека.
  • navigate('Details') - мы вызываем функцию navigate с именем маршрута, по которому мы хотели бы переместить пользователя.
к сведению

Если мы вызовем navigation.navigate с именем маршрута, которое мы не определили в навигаторе, он выведет ошибку в сборках разработки, и в сборках производства ничего не произойдет. Другими словами, мы можем переходить только к маршрутам, которые были определены в нашем навигаторе, - мы не можем переходить к произвольному компоненту.

Кнопка "Назад"​

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

Иногда вам нужно иметь возможность программно запускать это поведение, и для этого вы можете использовать navigation.goBack()

<Button title="Go back" onPress={() => navigation.goBack()} />

Назад к началу​

Иногда нам нужно вернуть пользователя сразу на несколько экранов назад. Для этого используется navigation.popToTop()

<Button title="Go back to first screen in stack" onPress={() => navigation.popToTop()} />

Done​

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

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!