时间戳

首页 > 解决方案 > 在屏幕之间传递数据、route.params、React Native 导航

javascript - 在屏幕之间传递数据、route.params、React Native 导航

问题描述

我正在尝试在我的应用程序的两个屏幕之间传递一些数据。我正在使用 react-navigation 中的 route.params （这里是文档https://reactnavigation.org/docs/params/）。

在第一个组件 - home.js - 我有一个包含一些数据和 FlatList 组件的数组。Home.js 在我的应用程序中正确显示数据。

在第二个组件-reviewsDetails.js-我试图显示来自 home.js 的数据 /item.title/ 但我有这个错误：“TypeError：无法读取未定义的属性（读取'item'）”。

我正在寻找解决这个问题的方法

这是我的代码：

主页.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>
)

}

如果它有帮助 - 我使用 react-navigation/native 的 6.0.2 版本和 react-navigation/stack 的 6.0.7

标签： javascriptreactjsreact-nativereact-navigationrouteparams

解决方案

你必须从home屏幕传递这样的参数。将它传递给一个名为的对象data（这可以命名为您想要的任何名称）

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

然后在屏幕上像这样在下一个屏幕上获取reviewDetails它

const { data } = route.params;

推荐阅读