reagieren Navigation geben Fehler undefined ist kein Objekt (Bewertung 'this.props.navigation')

Question

Ich bin neu zu reagieren native Ich benutze Expo-App, um meinen Code ausführen Ich habe keine Indexdatei wie in anderen Fragen alle Dateien erläutert Ich habe sind app.js, login.js, router.js, home.js und Mein Bewerbungsablauf sollte so gehen Login> auf Knopf klicken> Home aber auf Knopfdruck Ich bekomme Fehler Undefined ist kein Objekt (Bewertung ' this.props.navigation '), Bitte helfen Sie mir, wo ich falsch liege. danke im voraus.

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

Das Problem ist, dass React Navigation nicht mit Ihrer App-Komponente als @Eden erwähnt verbunden ist. Die Komponente, die Sie in der App zurückgeben, muss Ihr StackNavigator sein.

Hier ist ein sehr gutes Tutorial, das das mit einem TabNavigator zeigt.
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4