Expo Router – Переход к другому экрану

Вопрос или проблема

<Pressable
          style={styles.totalContainer}
          onPress={() => router.push("../../components/Cart/Cart")}
        >
          <Text style={styles.cartTitle}>Корзина | </Text>
          <View style={styles.cartInfo}>
            <Text style={styles.cartItems}>
              {orders.length} {orders.length === 1 ? "товар" : "товаров"}
            </Text>
            <Text style={styles.cartTotal}>
              Rp.
              {orders.reduce((total, order) => total + order.price, 0)}
            </Text>
          </View>
        </Pressable>

const index = () => {
  return (
    <View style={{ flex: 1 }}>
      <Greet />
      <Menu />
    </View>
  );
};

Ответ или решение

Конечно! Чтобы помочь вам в навигации с экрана "Menu" на другой экран в вашем приложении с использованием Expo Router, давайте проанализируем вашу текущую реализацию и предложим решение.

Проблема:

Вы используете router.push("../../components/Cart/Cart"), чтобы переключиться на экран Cart, однако данный путь может быть использован неправильно из-за структуры каталогов или неправильно настроенных маршрутов.

Решение:

1. Проверьте структуру папок:
Убедитесь, что путь, который вы указываете в router.push, соответствует фактической структуре папок вашего проекта. Путь должен быть относительным от текущего файла, в котором находится ваш код.

2. Настройка навигации:
Expo Router требует, чтобы страницы находились в специальной папке, обычно это app или src/app. Убедитесь, что ваш файл Cart.tsx правильно расположен в папке для маршрутов.

Пример базовой настройки навигации:

1. Обновите свой проект:
   Убедитесь, что у вас правильно настроен expo-router. В корне вашего проекта должна быть установлена соответствующая зависимость.

2. Файл структуры:
   Предположим, ваша структура файлов выглядит следующим образом:

/app
  ├── index.tsx
  ├── Menu.tsx
  └── Cart.tsx

3. Обновление компонента Menu:
   В вашем Menu.tsx, попробуйте использовать следующий код:

import { Pressable, View, Text } from 'react-native';
import { useRouter } from 'expo-router'; // Импортируйте useRouter

const Menu = ({ orders }) => {
  const router = useRouter(); // Инициализация роутера

  return (
    <Pressable
      style={styles.totalContainer}
      onPress={() => router.push('/Cart')} // Измените на нужный путь
    >
      <Text style={styles.cartTitle}>Cart | </Text>
      <View style={styles.cartInfo}>
        <Text style={styles.cartItems}>
          {orders.length} {orders.length === 1 ? "item" : "items"}
        </Text>
        <Text style={styles.cartTotal}>
          Rp. {orders.reduce((total, order) => total + order.price, 0)}
        </Text>
      </View>
    </Pressable>
  );
};

export default Menu;

4. Проверьте файл Cart.tsx:
   Убедитесь, что в вашем файле Cart.tsx присутствует основной код компонента:

const Cart = () => {
  return (
    <View>
      <Text>Товары в корзине</Text>
      {/* Ваш контент здесь */}
    </View>
  );
};

export default Cart;

5. Обновите index.tsx:
   Если вы хотите отобразить компонент Menu, убедитесь, что он корректно импортируется:

import { View } from 'react-native';
import Menu from './Menu';

const index = () => {
  return (
    <View style={{ flex: 1 }}>
      <Menu />
    </View>
  );
};

export default index;

Заключение:

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

Если у вас есть дополнительные вопросы или возникнут ошибки, пожалуйста, дайте знать!