更改屏幕给出未定义的 props.navigation 错误反应本机答案

【问题标题】：Changing screen gives undefined props.navigation error react native更改屏幕给出未定义的 props.navigation 错误反应本机
【发布时间】：2018-08-21 18:43:42
【问题描述】：

我正在尝试在几秒钟后更改屏幕，这是为了在本机反应中获得闪屏效果。我有一个应用程序起源的主屏幕。第一个屏幕的代码是：

import HomeUp from './HomeUp' 
import Splash from './Splash'
import React, { Component } from "react";

export default class OriginPage extends Component {

constructor(props){
 super(props)
 this.state = {
   component : <Splash />
 }
}

componentDidMount(){

   // Start counting when the page is loaded
   this.timeoutHandle = setTimeout(()=>{
   // Add your logic for the transition
   this.setState({ component: <HomeUp /> })
   }, 5000);
}

componentWillUnmount(){
   clearTimeout(this.timeoutHandle); 
}

render() {

return (
  this.state.component
     );
   }
}

我的启动画面是：

import React from 'react';
import { StatusBar , View , Text , ActivityIndicator } from 'react-native';
export default class Splash extends React.Component {
    render() {

        return (
            <View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#34495e'}}>
                <StatusBar backgroundColor="#2c3e50" barStyle="light-content"/> 
                <Text style={{ color : 'white',fontSize : 18 }}>Hello Splash</Text>
                <ActivityIndicator color={'white'}/> 
            </View>
        )
    }
}

到目前为止一切正常，5s 后屏幕切换也正常，但下面的代码有错误。

       import React, { Component } from "react";
        class HomeUp extends Component {

        render () {
            const { navigate } = this.props.navigation;
            return(
               <TouchableHighlight  onPress={() => navigate("Products", { product: item })} underlayColor="transparent">
                  <View style={styles.view} >
                  <Image style={styles.image} source={{uri: item.images[0].src}} />
                  <Text style={styles.name}>{item.name}</Text>
                </View>
              </TouchableHighlight> 
);
}

}

单独加载此屏幕没有错误，但在更改屏幕时我收到undefined navigation.props 错误。汉克斯进阶了。

【问题讨论】：

标签： react-native react-redux react-native-android react-navigation react-native-navigation

【解决方案1】：

如果你在 HomeUp 组件中解构你的导航道具，你应该这样做：

const { navigation } = this.props;

也可以：

const navigate = this.props.navigation;

希望对您有所帮助。

【讨论】：

虽然单击项目导航未定义不是对象导航。导航错误