TypeError:未定义的对象不是对象(计算‘_reactNative.route.params)-反应导航5.0

Question

我知道S.O.还有一些与我的问题类似的问题，但它们对我不起作用。

我正在尝试将变量从主屏幕发送到另一个后续屏幕。但是，我得到了错误：

未定义的对象(evaluating'_reactNative.route.params)不是TypeError

我不确定这是否与我如何编写将参数传递给ReactiveNavigation5.0中的路由的代码有关。但是我看了文档，代码在我看来很好。

这是我的代码：

Home.JS

​

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, navigation } from 'react-native';
import Follow from './Follow';

export default class Home extends React.Component {

    constructor(props) {
        
        super(props);
        this.state = {
            followRequest: ['John', 'Jane', 'Ram', 'Janice'],
            following: ['Hitesh']
        };
    }

    doFollow = index => {
        const { followRequest, following } = this.state;

        const followNew = followRequest.splice(index, 1);

        following.push(followNew)

        this.setState({
            followRequest,
            following
        });
    };

    render() {

        console.log(this.props.navigation)

    return (
        <View style={styles.container}>
            <Text>You are following {this.state.following.length}</Text>
            <Text>You have {this.state.followRequest.length} follow requests</Text>
            <Button
                title='Follow Page'
                onPress={() => {

                    this.props.navigation.navigate('Follow', {
                        
                        followRequest: this.state.followRequest,
                        following: this.state.following,
                        doFollow: this.doFollow()

                    });
                }}
            />
        </View>
            );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

​

Follow.JS

​

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacityBase, route, navigation} from 'react-native';


export default class Follow extends React.Component {


    render() {

        const { followRequest }  = route.params;
        const { doFollow }  = route.params;

    return (
        <View style={styles.container}>

            <Text>followRequest: {JSON.stringify(followRequest)}</Text>   
          
        <Button
                title='Home Page'
                onPress={() => {
                    this.props.navigation.navigate('Home')
                } }
            />
        </View>
            );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

​

Answer 1

您正在从“react原生”导入route和navigation。它们应该是使用this.props作为道具访问的。

​

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacityBase } from 'react-native';


export default class Follow extends React.Component {


    render() {

        const { followRequest }  = this.props.route.params;
        const { doFollow }  = this.props.route.params;

    return (
        <View style={styles.container}>

            <Text>followRequest: {JSON.stringify(followRequest)}</Text>   
          
        <Button
                title='Home Page'
                onPress={() => {
                    this.props.navigation.navigate('Home')
                } }
            />
        </View>
            );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

​