React 네이티브 : TypeError : undefined가 (this.props.navigation.navigate '을 평가하는) 객체가 아닙니다.

Question

반응 네이티브에서 초보자이기 때문에 코드에서 문제를 파악할 수 없습니다. 인터넷에서 읽음으로써, 나는 약간의 구속력이있는 어쩌면 생각을 가지고 있습니다.

그래서 코드는 index.js로 시작하고 거기에 App 구성 요소를 등록합니다. 앱 구성 요소에는 스택 탐색 경로 만 포함됩니다. LoginScreen 구성 요소 (로고, 배경 및 응용 프로그램 이름 표시)를로드하고 LoginForm 구성 요소를로드합니다. Login 단추에는 인증이 없으며 로그인 단추를 누를 때 Menu 구성 요소가로드된다는 점만 필요합니다. 그것은 형식 오류를 제공한다 : 정의되지 않은 것은

하는 index.js

import { AppRegistry } from 'react-native'; 
import App from './App';  

AppRegistry.registerComponent('bluebulk',() => App); 

App.js

import { StackNavigator } from 'react-navigation'; 
import LoginScreen from './src/components/login/LoginScreen'; 
import Menu from './src/components/menu/Menu'; 

    const App = StackNavigator({ 
    Main: { screen: LoginScreen }, 
    Menu: { screen: Menu } 
}); 

export default App; 

LoginScreen.js를 ('this.props.navigation.navigate'를 평가) 목적 아니다

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

class LoginScreen extends Component { 

render() { 
    return (

     <View style={styles.container}> 
      <View style={styles.logoContainer}> 
       <Image 
        style={styles.logo} 
        source={require('../../images/transparent.png')} 
       /> 
       <View style={{ flexDirection: 'row' }}> 
        <Text style={styles.blueTextStyle}>Blue</Text> 
        <Text style={styles.bulkTextStyle}>Bulk</Text> 
       </View> 
      </View> 
      <View style={styles.formContainer}> 
       <LoginForm /> 
      </View> 
     </View> 


     ); 
} 
} 


export default LoginScreen; 

LoginForm.js

import React, { Component } from 'react'; 
import { 
StyleSheet, 
TextInput, 
TouchableOpacity, 
Text, 
View, 
KeyboardAvoidingView, 
Keyboard 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class LoginForm extends Component { 

render() { 
    return (

     <KeyboardAvoidingView behavior='height' style={styles.container}> 

      <View style={{ flexDirection: 'row' }}> 
       <Text style={styles.textStyle}>Email:</Text> 
       <TextInput 
        style={styles.styleInput} 
        placeholder="user@gmail.com" 
        returnKeyType="next" 
        keyboardType="email-address" 
        onSubmitEditing={() => this.refs.password.focus()} 
       /> 
      </View> 

     <View style={{ flexDirection: 'row' }}> 
      <Text style={styles.textStyle}>Password:</Text> 
      <TextInput 
       ref='password' 
       style={styles.styleInput} 
       placeholder="password" 
       secureTextEntry 
       returnKeyType="go" 
       onSubmitEditing={Keyboard.dismiss} 
      /> 
     </View> 

      <TouchableOpacity 
      style={styles.buttonContainer} 
      onPress={() => this.props.navigation.navigate('Menu')} //Error here 
      > 
       <Text style={styles.buttonText}>Login</Text> 
      </TouchableOpacity> 
     </KeyboardAvoidingView> 

     ); 
} 
} 

export default LoginForm; 

Menu.js는

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

class Menu extends Component { 

render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View style={styles.container}> 
      <View style={styles.viewContainer}> 

       <TouchableOpacity style={styles.buttonContainer}> 
        <Text style={styles.buttonText}>View Products</Text> 
       </TouchableOpacity> 

       <TouchableOpacity style={styles.buttonContainer}> 
        <Text style={styles.buttonText}>View Discounts/Offers</Text> 
       </TouchableOpacity> 

       <TouchableOpacity style={styles.buttonContainer}> 
        <Text style={styles.buttonText}>View Invoice History</Text> 
       </TouchableOpacity> 

      </View> 

     </View> 
     ); 
} 
} 



export default Menu; 

Answer 1

당신은 탐색이 당신의 LoginForm 구성 요소에 더 낮은 아래 소품 통과해야합니다.

이 시도 : 당신은 다음과 같은 결과와 끝까지해야 <LoginForm navigation={this.props.navigation} />

: