反应导航给错误不确定是不是一个对象（评估“this.props.navigation”）

Question

我是新来的反应原生我使用世博会应用到我的代码运行我没有索引文件中的其他问题的所有文件解释我已经是app.js，login.js，router.js，home.js和我的应用程序的流程应该是这样登录>按钮点击>首页 但按钮点击我收到错误未定义是不是一个对象（计算' this.props.navigation'）， 请帮我在哪里我错了。 在此先感谢。

import React from 'react'; 
 
import { StyleSheet, Text, View } from 'react-native'; 
 
import Login from './containers/Login/Login'; 
 
import {Navigate} from './containers/Navigation/Router'; 
 
import { AppRegistry } from 'react-native'; 
 

 
export default class App extends React.Component { 
 
    render() { 
 
    return (<Login navigation={this.props.navigation}/>); 
 
    } 
 
} 
 

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

import React from 'react'; 
 
import { StyleSheet, Text,TextInput,Button,Image, View } from 'react-native'; 
 
import Navigate from '../Navigation/Router'; 
 
import RNChart from 'react-native-chart'; 
 

 
export default class Login extends React.Component{ 
 
    static navigationOptions = { 
 
    title:'Login', 
 
    }; 
 

 
    render() { 
 
    const navigate = this.props.navigation; 
 
    return (
 
     <View style={styles.container}> 
 
     <RNChart style={styles.chart} 
 
        chartData={chartData} 
 
        verticalGridStep={5} 
 
        type="bar" 
 
        xLabels={xLabels}> 
 
       </RNChart> 
 
     <Image 
 
      source={require('../../NCS.png')} 
 
     /> 
 
     <TextInput 
 
      style={styles.textInput} 
 
      placeholder="Username" 
 
     /> 
 
     <TextInput 
 
      style={styles.textInput} 
 
      placeholder="Password" 
 
      secureTextEntry= {true} 
 
     /> 
 
     <Button 
 
      onPress={this._handlePress} 
 
      title="Login" 
 
      color="#0086b3" 
 
     /> 
 
     </View> 
 
    ); 
 
    } 
 

 
    _handlePress(event) { 
 
     //navigate('Home') 
 
     this.props.navigation.navigate('Home', {name: 'Home'}) 
 
    } 
 

 
} 
 

 
var chartData = [ 
 
    { 
 
     name:'BarChart', 
 
     type:'bar', 
 
     color:'purple', 
 
     widthPercent:0.6, 
 
     data:[ 
 
      30, 1, 1, 2, 3, 5, 21, 13, 21, 34, 55, 30 
 
     ] 
 
    }, 
 
    { 
 
     name:'LineChart', 
 
     color:'gray', 
 
     lineWidth:2, 
 
     showDataPoint:false, 
 
     data:[ 
 
      10, 12, 14, 25, 31, 52, 41, 31, 52, 66, 22, 11 
 
     ] 
 
    } 
 
]; 
 
    
 
var xLabels = ['0','1','2','3','4','5','6','7','8','9','10','11']; 
 

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

 
    textInput: { 
 
    padding: 10, 
 
    width: 200, 
 
    }, 
 

 
    chart: { 
 
     position: 'absolute', top: 16, left: 4, bottom: 4,right: 16 
 
    } 
 
});

import React from 'react'; 
 
import { StyleSheet, Text, View } from 'react-native'; 
 
import {Navigate} from '../Navigation/Router'; 
 

 
export default class Home extends React.Component { 
 
    static navigationOptions = { 
 
    title:'Home', 
 
    }; 
 

 
    render() { 
 
    return (
 
     <View style={styles.container}> 
 
     <Text> Work under progress</Text> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

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

import React from 'react'; 
 
import { StyleSheet, Text, View } from 'react-native'; 
 
import {StackNavigator} from 'react-navigation'; 
 
import Login from '../Login/Login'; 
 
import Home from '../Home/Home'; 
 

 
export default Navigate = StackNavigator({ 
 
    Home: { screen: Home, }, 
 
});

Answer 1

的问题是，阵营导航未连接到您的应用程序组件作为@Eden提及。您在App中返回的组件需要是您的StackNavigator。

这里有一个很好的教程，显示的与此TabNavigator的。
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4