Блог

Я пытаюсь передать некоторые данные между двумя экранами в своем приложении. Я использую для этого route.params из react-навигации (вот документы https://reactnavigation.org/docs/params/).

В первом компоненте — home.js — У меня есть массив с некоторыми данными и компонентом FlatList. Home.js правильно отображает данные в моем приложении.

Во втором компоненте — reviewsDetails.js — Я пытаюсь отобразить данные /элемент.название/ из дома.js, но у меня эта ошибка: «Ошибка типа: Не удается прочитать свойства неопределенного (чтение «элемента»)».

Я ищу решение этой проблемы

Вот мой код:

home.js

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


function Home({navigation}) {
    const [reviews, setReviews] = useState(
        [
            {title:"Zelda", rating:1, body:'lorem ipsum', key:1},
            {title:"Cruella", rating:1, body:'lorem ipsum', key:2},
            {title:"Voldemort", rating:1, body:'lorem ipsum', key:3},

        ]
    )


    return (
        <View style={styles.container}>
<FlatList
data={reviews}
renderItem={({item})=>(
<TouchableOpacity onPress={()=> navigation.navigate("reviewDetails", item)}> 

    <Text>{item.title}</Text>
  
</TouchableOpacity>

)}

/>

        </View>
    );
}

export default Home;
 

reviewDetails.js

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


export default function ReviewDetails({ route, navigation }) {
  const { item } = route.params;

  return (
    <View style={globalStyles.container}>
      <Text>{item.title}</Text>
    </View>
  );
}
 

И вот
изображение ошибки

Codesandbox с исходным кодом: ссылка

Я буду благодарен за любые советы

Редактировать.

Дополнительная информация 🙂

Вот также мой navigation.js:

 mport { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from 'react';

import about from '../screens/about'
import home from '../screens/home'
import reviewDetails from '../screens/reviewDetails'



const Tab= createBottomTabNavigator();

const AppNavigator=()=>(

    <Tab.Navigator>

        <Tab.Screen name="about" component={about}></Tab.Screen>
        <Tab.Screen name="home" component={home}></Tab.Screen>
        <Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>

    </Tab.Navigator>
) 

export default AppNavigator;
 

и app.js

 import React from 'react';
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import AppNavigator from "./navigation/navigation.js"

export default function App(){

return(

  <NavigationContainer>

<AppNavigator>
  </AppNavigator>  </NavigationContainer>
)

}
 

Если это полезно — я использую версию 6.0.2 react-навигации/родной и 6.0.7 react-навигации/стека

Вы должны передавать такие параметры с home экрана. Передайте его в объект с именем data (его можно назвать как угодно).

 onPress={() => {
              navigation.navigate("reviewDetails", {
                data: item,
              });
            }}
 

А затем выведите его на следующий экран, вот так, на reviewDetails экране

 const { data } = route.params;