将值从一个屏幕移动到另一个 ERROR: undefined is not an object (evalating 'route.params.message')

Posted 2023-04-13

【中文标题】将值从一个屏幕移动到另一个 ERROR: undefined is not an object (evalating \'route.params.message\')

【英文标题】：Moving values from one screen to another ERROR: undefined is not an object (evaluating 'route.params.message')将值从一个屏幕移动到另一个 ERROR: undefined is not an object (evalating 'route.params.message')

【发布时间】：2020-05-29 12:16:14

【问题描述】：

我试图通过将值从一个屏幕传递到另一个屏幕来从一个屏幕导航到另一个屏幕，但是，我收到了上述错误。理想情况下，我想从一个平面列表中发送值，我正在尝试实现一个可点击的平面列表，它将一个参数从选定的行传送到另一个屏幕。

//index.js

import React from 'react';
import  StyleSheet, Button, Text, View, FlatList, TouchableHighlight  from 'react-native';

const ComponentsScreen = ( navigation ) => 

  //example for detail scree
  return (
    <View>
    <FlatList
           data=[
              key: 'Task 1' ,
              key: 'Task 2' ,
              key: 'Task 3' ,
              key: 'Task 4' ,
              key: 'Task 5' ,
           ]
           renderItem=( item ) => 
               return (
                 <TouchableHighlight
                        onPress=() =>
                        navigation.navigate('Next',  message: 'hello from screen 1' )
                 >
                      <Text >item.key</Text>
                 </TouchableHighlight>
               );
             
           

    />

    <Button
        onPress=() => navigation.navigate('NextScreen')
        title="Go to ImageScreen"
    />
    </View>
  );
;
const styles = StyleSheet.create(
textStyle: 
  fontSize: 30

);

export default ComponentsScreen;

//NextScreen.js

  import React from 'react';
import  Text, View  from 'react-native';

//example for detail screen
const NextScreen = (route) => 
const  message  = route.params;

    return (
        <View>
          <Text>message: JSON.stringify(message)</Text>
        </View>
    );
;

export default NextScreen;

app.js

import React,  Component  from 'react';
import  createAppContainer  from 'react-navigation';
import  createStackNavigator  from 'react-navigation-stack';
import Index from './screens/Index';
import NextScreen from './screens/NextScreen';


const navigator = createStackNavigator(
  Home: Index,
  Next: NextScreen
,

  initialRouteName: 'Home',
  defaultNavigationOptions: 
    title: 'App'
  

);

export default createAppContainer(navigator);

【参考方案1】：

如果您想将一个屏幕的参数接收到另一个屏幕，您需要使用getparam 函数，例如：const message = navigation.getParam('message');

【讨论】：

嗨，hlebon，感谢您的回复，我尝试了const message = navigation.getParam('message', 'default'); 和const message = this.props.navigation.getParam('message', 'default');，但仍然没有得到满足

您好，您使用的是什么版本的 react-navigation？我在您的 NextScreen 中看到您正在使用 const NextScreen = (route) => ... 。一定要解构props参数const NextScreen = ( navigation ) => ...

嗨，hlebon，是的，这就是问题所在，我改变了它现在正在工作。

仍然出现错误，navigation.getParam() 未定义。我是usign。注册护士 5

现在不行了……

【参考方案2】：

终于找到了在Routes之间移动值的方法

 navigation.navigate('RouteB', 
        screen: 'ScreenC',
        params:  param1: "foo", param2: "bar" 
      )

然后你可以在ScreenC 中取这个值

const ScreenC = ( navigation, route ) => 
  const  param1, param2  = route.params
....

【参考方案3】：

试试 encodeURIComponent(this.props.navigation.getParam('message'); 要么 encodeURIComponent(this.props.navigation.Param('message');

【参考方案4】：

 onPress=() => 
                    navigation.navigate("RestaurantDetail", 
                        name: restaurant.name,
                        price: restaurant.price,
                        rating: restaurant.rating,
                        categories: restaurant.categories,
                        image: restaurant.image_url,
                        reviews: restaurant.reviews
                    )
                

这样传下去

const About = ( route ) => 
const  name, image, categories, price, reviews, rating  = route.params;

你可以这样破坏它