Задача #3554, Этап #1 - Навигация назад

Попрактикуемся со вложенностью навигации и переходами между экранами
Компонент App должен возвращать только контейнер навигации с подключенным стэк навигатором.
В стэке должен быть три экрана - первый с именем Product, второй с именем Comments, третий Analogues.
Первый экран должен отображать компонент screens/Product, второй - screens/Comments, третий - screens/Analogues.
При этом первым должен загружаться экран Product.
Не изменяй компоненты screens/Product, screens/Comments, `screens/Analogues.

Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.

App.js

import React from 'react';

function App() {
  return null;
}

export default App;

app.json

{
  "expo": {
    "name": "1",
    "slug": "1",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

screens/Analogues/index.js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function Analogues({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Analogues</Text>
      <Text style={styles.description}>Intel Core i7-10700K 3.8GHz / 16MB</Text>
      <Text style={styles.description}>Intel Core i5-10600K 4.1 GHz / 12 MB</Text>
      <Text style={styles.description}>Intel Core i9-10900 2.8 GHz / 20 MB</Text>
      <View style={styles.buttonWrapper}>
        <Button title="Back" />
      </View>
      <View style={styles.buttonWrapper}>
        <Button title="Comments" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 25,
    marginBottom: 10,
  },
  description: {
    fontSize: 18,
    marginVertical: 4,
  },
  buttonWrapper: {
    paddingVertical: 4,
  },
});

screens/Comments/index.js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function Comments({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Comments</Text>
      <Text style={styles.description}>John D: Very hot</Text>
      <Text style={styles.description}>Jack S: The best processor!</Text>
      <Text style={styles.description}>Intel Core i9-10900 2.8 GHz / 20 MB</Text>
      <View style={styles.buttonWrapper}>
        <Button title="Back" />
      </View>
      <View style={styles.buttonWrapper}>
        <Button title="Main" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 25,
    marginBottom: 10,
  },
  description: {
    fontSize: 18,
    marginVertical: 4,
  },
  buttonWrapper: {
    paddingVertical: 4,
  },
});

screens/Product/index.js

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function Product({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Product Details</Text>
      <Text style={styles.description}>Intel Core i7-10700 2.9GHz / 16MB</Text>
      <Text style={styles.description}>Processor family: Intel Core i7</Text>
      <Text style={styles.description}>Connector type: Socket 1200</Text>
      <Text style={styles.description}>Number of cores: 8</Text>
      <Text style={styles.description}>
        Generation of Intel processors: 10th generation (Comet Lake)
      </Text>
      <View style={styles.buttonWrapper}>
        <Button title="Comments" />
      </View>
      <View style={styles.buttonWrapper}>
        <Button title="Analogues" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 25,
    marginBottom: 10,
  },
  description: {
    fontSize: 18,
    marginVertical: 4,
  },
  buttonWrapper: {
    paddingVertical: 4,
  },
});