n'est pas un objet non défini réagir natif

Question

Je ne suis pas avoir aucune idée pourquoi je reçois

« non défini n'est pas un objet (évaluation « _this.props.navigation.navigate ») »

Je suis nouveau bie dans la réaction mais j'ai traversé chaque solution possible mais toujours obtenir cette erreur. Je partage mon code ci-dessous:

app.js

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

const Application = StackNavigator({ 
     Home: { screen: Login }, 
     Dashboard: { screen: Dashboard }, 
    }, { 
     navigationOptions: { 
      header: false 
     } 
}); 

export default class App extends React.Component { 
    render() { 
    return (
     <Application /> 
    ); 
    } 
} 

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

Login.js

import React from 'react'; 
import { StyleSheet, View, Image, Text, TextInput, KeyboardAvoidingView } from 'react-native'; 
import LoginForm from './LoginForm'; 
import {StackNavigator} from 'react-navigation'; 

export default class Login extends React.Component { 

    render() { 
     return (
      <KeyboardAvoidingView behavior='padding' style={styles.container}> 
       <View style={styles.logoContainer}> 
        <Image source={require('../../images/logo.png')} 
          style={styles.logo} 
        /> 
       </View> 
       <Text style={styles.title}>Share Emotions Instantly..</Text> 
       <View style={styles.formContainer}> 
        <LoginForm></LoginForm> 
       </View> 
      </KeyboardAvoidingView> 
     ); 
    } 
} 

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

    logoContainer: { 
     alignItems: 'center', 
     justifyContent: 'center' 
    }, 

    logo: { 
     width: 70, 
     height: 70 
    } 
}); 

LoginForm.js

import React from 'react'; 
import { StyleSheet, View, TextInput, TouchableOpacity, Text, Alert } from 'react-native'; 
import Dashboard from '../Dashboard/Dashboard'; 
import {StackNavigator} from 'react-navigation'; 

export default class LoginForm extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    onButtonPress =() => { 
     alert('ok'); 
     const { navigate } = this.props.navigation; 
     navigate('Dashboard'); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <TextInput underlineColorAndroid="transparent" 
          style={styles.input} 
          placeholder="username or email" 
          placeholderTextColor='rgba(255,255,255,0.5)' 
          returnKeyType="next" 
          keyboardType="email-address" 
          autoCapitalize="none" 
          autoCorrect={false} 
          onSubmitEditing={() => this.passwordInput.focus()}> 
       </TextInput> 

       <TextInput underlineColorAndroid="transparent" 
          style={styles.input} 
          placeholder="password" 
          placeholderTextColor='rgba(255,255,255,0.5)' 
          returnKeyType='go' 
          ref={(input) => this.passwordInput = input} 
          secureTextEntry> 
       </TextInput> 

       <TouchableOpacity style={styles.buttonContainer} 
            onPress={this.onButtonPress}> 
        <Text style={styles.buttonText}>Login</Text> 
       </TouchableOpacity> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     padding: 20 
    }, 

    input: { 
     height: 40, 
     marginBottom: 15, 
     backgroundColor: 'rgba(255,255,255,0.2)', 
     paddingHorizontal: 10, 
     width: 300 
    }, 

    buttonContainer: { 
     backgroundColor: '#888', 
     paddingVertical: 10 
    }, 

    buttonText: { 
     textAlign: 'center', 
     color: '#fff', 
     fontWeight: '700' 
    } 
}); 

Dashboard.js

import React from 'react'; 
import { StyleSheet, View } from 'react-native'; 
import {StackNavigator} from 'react-navigation'; 

export default class Dashboard extends React.Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text>this is Dashboard</Text> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1 
    } 
}); 

Je sais que c'est un problème commun, mais je ne suis toujours pas pourquoi faire l'objet « de navigation » n'a pas été transmise comme des accessoires pour les autres composants.

Answer 1

La propriété de navigation sera injectée dans tous les écrans que vous ajoutez aux configurations d'itinéraire pour ScreenNavigator (dans votre cas Home et Dashboard). Cependant, pour les composants enfants de ces écrans, vous devrez transmettre la propriété de navigation.

<LoginForm navigation={this.props.navigation} />