TypeError: undefined is not an object (evaluating'_reactNative.route.params) 反应导航 5.0

Question

我知道来自 SO 的其他问题与我的问题类似，但它们对我不起作用。

我正在尝试将变量从主屏幕发送到另一个关注屏幕。 但是我收到错误：

TypeError: undefined is not an object (evaluating'_reactNative.route.params)

我不确定这是否与我编写用于将参数传递给 React Navigation 5.0 中的路由的代码的方式有关。 但我查看了文档，代码对我来说看起来不错。

这是我的代码：

首页.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', }, });

关注.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-native”导入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', }, });