React Native: Навигация и исправление ошибок (Урок 7)

Этот урок посвящен реализации перехода между страницами в проекте React Native с использованием стек-навигации.

Исправление недочета из прошлого урока

Перед началом необходимо исправить ошибку в обработке событий компонента App.js. Если используются componentDidMount и componentWillUnmount, добавьте обработчик onError, выводящий ошибки в консоль:

componentDidMount() {
  // ... ваш код ...
}

componentWillUnmount() {
  // ... ваш код ...
}

onError(error) {
  console.error(error);
}

При необходимости удалите глобальные стили из App.js.

Реализация навигации с помощью React Navigation

Для реализации навигации используем библиотеку react-navigation. Установите её, выполнив следующие команды в терминале:

expo install react-navigation
Установите дополнительные библиотеки, указанные в официальной документации.
expo install @react-navigation/stack

Описание экранов

Создайте файл screens/index.js для описания страниц приложения. Пример с двумя страницами, Main и FullInfo:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Main from './Main';
import FullInfo from './FullInfo';

const Stack = createStackNavigator();

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} options={{ title: 'Главная' }} />
        <Stack.Screen name="FullInfo" component={FullInfo} options={{ title: 'Статья' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Интеграция навигации в основной файл

В App.js замените отображение компонента Main на AppNavigation:

// ... импорт AppNavigation ...

function App() {
  return (
    <AppNavigation />
  );
}

export default App;

Переход между экранами

Добавьте кнопку перехода на страницу FullInfo в компонент Main.js:

import React from 'react';
import { Button, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function Main() {
  const navigation = useNavigation();

  return (
    <View>
      <Text>Главная страница</Text>
      <Button title="Открыть статью" onPress={() => navigation.navigate('FullInfo')} />
    </View>
  );
}

Добавьте кнопку возврата в FullInfo.js:

import React from 'react';
import { Button, Text, View } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';

export default function FullInfo() {
  const navigation = useNavigation();
  const route = useRoute();
  const { item } = route.params;

  return (
    <View>
      <Text>{item.name}</Text>
      <Text>{item.full}</Text>
      <Button title="Назад" onPress={() => navigation.goBack()} />
    </View>
  );
}

Отображение списка и передача данных

В Main.js создайте массив данных и отобразите его с помощью FlatList:

// ... импорт необходимых компонентов ...

const news = [
  { name: 'Google', announcement: 'Google!', full: 'Google is cool' },
  { name: 'Apple', announcement: 'Apple!', full: 'Apple is great' },
  { name: 'Facebook', announcement: 'Facebook!', full: 'Facebook is amazing' },
];

export default function Main() {
  // ... другой код ...

  return (
    // ... другой код ...
    <FlatList
      data={news}
      renderItem={({ item }) => (
        <View>
          <Text onPress={() => navigation.navigate('FullInfo', { item })}>{item.name}</Text>
        </View>
      )}
      keyExtractor={item => item.name}
    />
    // ... другой код ...
  );
}

В этом уроке мы реализовали навигацию в приложении React Native с помощью react-navigation. Мы научились создавать экраны, переходить между ними и передавать данные, используя useNavigation и useRoute.