3555 этап 2

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

3555 этап 2

Pepe

item в качестве второго аргумента передал, данные отображаются, но проверки со мной не согласны почему-то)
Не проходят эти:

Данные item должны быть переданны в качестве второго аргумента navigation.navigate

На экране GameDetails должны отображаться данные, переданный в методе navigation.navigate
App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

import GamesList from './screens/GamesList';
import GameDetails from './screens/GameDetails';

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Games'>
        <Stack.Screen name='Games' component={GamesList}/>
        <Stack.Screen name='Details' component={GameDetails}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

GamesList.js

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

const games = [
  {
    id: 1,
    name: 'Spider Man',
    platform: 'PS4',
    publisher: 'SIE (Sony Interactive Entertainment)',
  },
  {
    id: 2,
    name: 'Mortal Kombat',
    platform: 'XBox',
    publisher: 'Warner Bros. Games',
  },
];

export default function GamesList({navigation}) {
  return (
    <View style={styles.container}>
      {games.map((item) => (
        <View style={styles.item} key={item.id}>
          <Text>{item.name}</Text>
          <TouchableOpacity style={styles.button}
          onPress={()=>{navigation.navigate('Details', {item});
        }}
          >
            <Text style={styles.buttonLabel}>View details</Text>
          </TouchableOpacity>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  item: {
    marginBottom: 10,
    padding: 8,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderRadius: 8,
    justifyContent: 'space-between',
  },
  button: {
    backgroundColor: '#4730EB',
    padding: 4,
    borderRadius: 4,
  },
  buttonLabel: {
    color: 'white',
  },
});

GameDetail.js


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

export default function GameDetails({route: params}) {
  if (!params && !params.id) return null;
  console.log(params);
  console.log(params.params.item);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>{params.params.item.name}</Text>
      <Text style={styles.description}>Platform: {params.params.item.platform}</Text>
      <Text style={styles.description}>Publisher: {params.params.item.publisher}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    color: '#4730EB',
    marginBottom: 8,
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
  },
  description: {
    marginVertical: 10,
  },
});

Solomon

Мой код прошедший все проверки:

export default function GamesList({navigation}) {
  return (
    <View style={styles.container}>
      {games.map((item) => (
        <View style={styles.item} key={item.id}>
          <Text>{item.name}</Text>
          <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Details', item)} >
            <Text style={styles.buttonLabel}>View details</Text>
          </TouchableOpacity>
        </View>
      ))}
    </View>
  );
}

export default function GameDetails({ route }) {
  if (!route.params && !route.params.id) return null;

  return (
    <View style={styles.container}>
      <Text style={styles.header}>{route.params.name}</Text>
      <Text style={styles.description}>Platform: {route.params.platform}</Text>
      <Text style={styles.description}>Publisher: {route.params.publisher}</Text>
    </View>
  );
}