ネイティブナビゲーターに反応してください：未定義はオブジェクトではありません（this.props.navigation.navigateを評価する）

Question

私はリアクションネイティブでナビゲーションを実装する方法を理解できません。 docごとに、私はプラグインをインストールして、コードを統合したが、それは誤り

未定義に与え続けてきたように は

は以下のインデックスであるオブジェクト（評価this.props.navigation.navigate）ではありません。 android.js

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

import Login from './src/pages/Login'; 
import Home from './src/pages/Home'; 

import { StackNavigator } from 'react-navigation'; 

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

const App = StackNavigator({ 
Login:{screen:Login}, 
Home: {screen: Home} 
}); 



const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('ECart',() => ECart); 

ログインページ

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TextInput, 
    Alert, 
    Button, 
    TouchableOpacity 
} from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 

import Home from './Home'; 


export default class Login extends Component { 



    constructor(props) { 
     super(props); 
     this.state = {}; 
     this.onButtonPress=this.onButtonPress.bind(this); 

    } 


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

    render() { 

    return (
     <View style={styles.container}> 

       <View style={{justifyContent: 'center',alignItems: 'center',height:250}}> 
        <Image style={{}} source={require('../img/ic_launcher.png')} /> 
       </View> 
       <View style={styles.wrapper}> 

        <View style={styles.inputWrap}> 
         <View style={styles.iconWrap}> 
         <Image style={styles.icon} source={require('../img/icon/ic_email.png')}/> 
         </View> 

         <TextInput 
          style={styles.input} 
          placeholder="Username" 
          underlineColorAndroid="transparent" 
          placeholderTextColor="#939598" 
         /> 

        </View> 

        <View style={styles.inputWrap}> 

         <View style={styles.iconWrap}> 
          <Image style={styles.icon} source={require('../img/icon/ic_lock.png')}/> 
         </View> 
         <TextInput 
          style={styles.input} 
          placeholder="Password" 
          secureTextEntry 
          underlineColorAndroid="transparent" 
          placeholderTextColor="#939598" 
         /> 

        </View> 

        <TouchableOpacity 
         activeOpacity={0.5} 
         onPress={this.onButtonPress}> 
         <View style={styles.button}> 
          <Text style={styles.buttonText}>Login</Text> 
         </View> 
        </TouchableOpacity> 

        <TouchableOpacity activeOpacity={0.5}> 
         <View style={styles.textWrap}> 
          <Text>Forgot Password.</Text><Text>Reset here</Text> 
         </View> 
        </TouchableOpacity> 

       </View> 

       <View style={styles.bottomTextWrap}> 
        <Text style={{}}> By clicking Sign In, you agree to our Terms and that you have read our Data Policy, including our Cookie Use. 
        </Text> 
       </View> 

       <View style={styles.bottomTextWrap}> 
       <Text> Copyright 2017 Suyati Technologies 
       </Text> 
      </View> 

     </View> 



    ); 
    } 

} 

const styles= StyleSheet.create({ 
    container:{ 
    flex:1, 
    backgroundColor: '#FFFFFF' 
    }, 

    inputWrap:{ 
    flexDirection:"row", 
    marginVertical:10, 
    height:50, 
    borderWidth:1, 
    borderColor:'#939598', 
    backgroundColor:'transparent', 
    }, 
    textWrap:{ 
    flexDirection:"row", 
    backgroundColor:'transparent', 
    justifyContent:'center', 
    alignItems:'center', 
    marginVertical:10, 
    paddingHorizontal:20 
    }, 
    bottomTextWrap:{ 
    flex:1, 
    flexDirection:"row", 
    backgroundColor:'transparent', 
    justifyContent: 'center', 
    alignItems:'flex-end', 
    marginVertical:10 
    }, 
    text:{ 
    justifyContent:'center', 
    alignItems:'center' 
    }, 

    input:{ 
    flex:1, 
    paddingHorizontal:10, 
    backgroundColor:"transparent", 
    color:'#939598' 
    }, 
    wrapper:{ 
    paddingHorizontal:30 
    }, 
    iconWrap :{ 
    paddingHorizontal:7, 
    justifyContent:'center', 
    alignItems:'center', 
    borderColor:'#939598' 
    }, 
    icon:{ 
    width:20, 
    height:20 
    }, 
    button:{ 
    backgroundColor:'#13AFBC', 
    paddingVertical:10, 
    marginVertical:10, 
    justifyContent:'center', 
    alignItems:'center' 
    }, 
    buttonText:{ 
    color:'#FFFFFF', 
    fontSize:18 
    } 
}) 

ホーム画面に移動しようとしています。 私は反応がネイティブに少し難しいと思っています。 誰かが正しい方向に私を導くことができれば、私はそれに固執し、新しいアプローチが必要なので、非常に役立つでしょう。

EDIT-Iは、コードを変更したが、まだそれは文句を言わないnavigate.Iは警告を得るが、それはloginpageに

感謝のまま！

Answer 1

さまざまなソース（多分チュートリアル）からコピー貼り付けしたコードがあり、うまくいくことが期待されているようですが、通常はそうではありません。あなたのコードにはいくつかの間違いがあります。

まずindex.android.jsファイルにECartというコンポーネントがあり、それはAppRegistry.registerComponent()関数に渡されます。したがって、このコンポーネントはあなたのアプリケーションの出発点です。あなたはまたAppという変数を持っていますが、これも実際にはコンポーネントですが、決して使用しません。今では、あなたのアプリは反応ナビゲーションを使用しません。ナビゲーションライブラリを使用するには、あるレベルでアプリライブラリに渡す必要があります。この

const App = StackNavigator({ 
    Login: {screen: Login}, 
    Home: {screen: Home}, 
}); 

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

この方法のように、例えば、EcartはAppRegistryに渡され、それがナビゲーションを処理するApp（ナビゲーションコンポーネント）を有します。 Appがナビゲーションを担当しているため、上記のLogin Screenが含まれているようなナビゲーションコンポーネントの 'ルート'と対応するコンポーネントを宣言する必要があります。 LoginがStackNavigator宣言の最初のものであるため、アプリが読み込まれると最初の画面になります。

StackNavigatorを通過したすべての成分は、反応ナビゲーションによって渡されたnavigationの小道具を持つようになりました。この小道具を使用すると、アプリ内の他の画面に移動できます。あなたのコードLoginのコンポーネントがStackNavigatorに渡されないため、this.props.navigationはundefinedになります。 this.props.navigation.navigateにアクセスしようとすると、undefinedがオブジェクトではないというエラーがスローされます。これはメインエラーを説明していますが、ここに貼り付けるコードにエラーがあるだけではありません。あなたのLoginコンポーネントで

は、あなたがnavigate関数を呼び出す

onButtonPress=() => { 
    navigate(Home, { name: 'Jane' }); 
}; 

を持っているが、それはanywareを宣言されていません。したがって、最初のエラーを解決すると、ボタンを押したときに別のエラーが表示されます（ Undefined is not a function）。ですから、これを解決するには2つのことが必要です。まず、navigate関数を宣言し、2番目のバインドonButtonPressメソッドを宣言します。

onButtonPress() { 
    const { navigate } = this.props.navigation; 
    navigate('Home', { name: 'Jane' }); 
}; 

、あなたはあなたを助けることができるこのvideo