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

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, которая передается нашим компонентам экрана.

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

App.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 с именем маршрута, по которому мы хотели бы переместить пользователя.
info

Если мы вызовем 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.

Sumerian school

Links#

React Navigation

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

📖💲

Become a Patron!

Оплата#

Сейчас ты находишся на урезанной версии сайта, после оформления подписки на Patreon, ты получишь полный доступ к обучающему курсу, а также доступ к серетным каналам нашего сервера в Discord.

Качай наше мобильное приложение или пройди тестирование в нашем JavaScript телеграм боте, а также подпишись на наши новости.

Sumerian school

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

📖 💵