反應原生導航器：未定義不是一個對象（評估this.props.navigation.navigate）

Question

我無法理解如何在react-native中實現導航。 具體根據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 
    } 
}) 

我試圖導航到主屏幕。 我在尋找反應原生有點困難。 如果任何人都可以指引我朝着正確的方向發展，那將會非常有幫助，因爲我堅持不懈，需要一種新方法。

編輯，我改變了代碼，但它仍然不會navigate.I得到警報，但它停留在loginpage

謝謝！

Answer 1

似乎你有來自不同來源（也許教程）的複製粘貼代碼，並希望它可以工作，但通常不會。在你的代碼中你有幾個錯誤。

首先，在index.android.js文件中你有ECart組件，它傳遞給AppRegistry.registerComponent()函數。所以，這個組件是你應用程序的起點。你也有App變量，這實際上也是一個組件，但你永遠不會使用它。所以現在，你的應用程序不使用react-navigation，因爲它不包括在內。爲了使用導航庫，您必須將它傳遞給某個級別的應用程序註冊表。例如這樣

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 prop，通過react-navigation傳遞。使用該道具，您可以導航到您應用中的其他屏幕。所以，因爲您在您的代碼Login組件未傳遞到StackNavigator,this.props.navigation將undefined。當你嘗試訪問this.props.navigation.navigate時，它會拋出一個錯誤，它說，未定義不是一個對象。這解釋了你的主要錯誤，但這不僅僅是你在這裏粘貼的代碼中的錯誤。

在你Login組件，則必須

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

這就要求navigate功能，但它沒有宣佈anyware。因此，當您解決第一個錯誤時，當您按下按鈕Undefined is not a function時，您將看到另一個錯誤。所以，要解決這個問題，你必須做兩件事。首先聲明導航函數，然後綁定onButtonPress方法。

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

，並綁定像

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

    this.onButtonPress=this.onButtonPress.bind(this); 
} 

這種方法如果你正在考慮，到底是怎麼結合，來看看這個video