反应原生导航器：未定义不是一个对象（评估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