反应原生导航器：未定义不是对象（评估 this.props.navigation.navigate）

Question

我无法理解如何在 react-native 中实现导航。 根据doc，我已经安装了插件并集成了代码，但它一直报错

未定义不是对象（评估 this.props.navigation.navigate）

下面是index.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
  }
})

我正在尝试导航到主屏幕。 我发现 react-native 有点困难。 如果有人可以指导我朝着正确的方向前进，那将非常有帮助，因为我坚持下去并且需要一种新的方法。

编辑-我更改了代码，但它仍然无法导航。我收到警报，但它停留在登录页面上

谢谢！

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 属性，由 react-navigation 传递。使用该道具，您可以导航到应用程序中的其他屏幕。所以，因为你在你的代码中Login 组件没有传递给StackNavigator，所以this.props.navigation 将是undefined。当你尝试访问this.props.navigation.navigate 时，它会抛出一个错误，上面写着 undefined is not an object。这解释了你的主要错误，但它不仅仅是你粘贴在这里的代码中的错误。

在您的 Login 组件中，您有

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

它调用navigate 函数，但它没有任何声明。因此，当您解决第一个错误时，您会在按下按钮时看到另一个错误，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