反応ナビゲーションエラーを返すundefinedはオブジェクトではありません（評価 '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

問題はReact Navigationが@EdenのようにAppコンポーネントに接続されていないことです。あなたがアプリケーションで返すコンポーネントは、StackNavigatorである必要があります。

これは、TabNavigatorでこれを示す非常に良いチュートリアルです。
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4