React Native：TypeError：未定義はオブジェクトではありません（ 'this.props.navigation.navigate'を評価する）

Question

反応ネイティブの初心者であるため、自分のコードで問題を把握することはできません。インターネットで読むことによって、私はバインディングの問題が多分あるという考えがあります。

私のコードはindex.jsで始まり、そこにAppコンポーネントを登録します。 appコンポーネントには、スタックナビゲーションルートだけが含まれています。 LoginScreenコンポーネントをロードし（アプリケーションのロゴ、バックグラウンド、および名前を表示します）、LoginFormコンポーネントがロードされます。ログインボタンには認証がありません。唯一必要なことは、ログインボタンを押したときにメニューコンポーネントが読み込まれることだけです。それはTypeError例外を与えている：未定義（ 'this.props.navigation.navigate' を評価）オブジェクト

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ではありません

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

あなたのLoginFormコンポーネントまで下ナビゲーション小道具を渡す必要があります

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

。