反應導航給錯誤不確定是不是一個對象（評估「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