Moving values from one screen to another ERROR: undefined is not an object (evaluating 'route.params.message')

Question

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

//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);

Answer 1

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

Answer 2

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

Answer 3

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

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

然后你可以在 ScreenC 和

中获取这些值

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

Answer 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;}

你可以这样破坏它

Moving values from one screen to another ERROR: undefined is not an object (evaluating 'route.params.message')

Moving values from one screen to another ERROR: undefined is not an object (evaluating 'route.params.message')

reactjs

react-native

navigation

native