Question

我收到错误＆＃34; undefined不是对象（＆＃39; this.props.navigation.navigate）＆＃34;当我点击标题为＆＃34;与Lucy聊天的按钮＆＃34;这应该带我到ChatScreen屏幕。

所有这些代码都在App.js文件中，我正在将其导出到android和ios文件中。

我收到此错误的原因是什么？谢谢！

import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View, 
  Image,
  TextInput,
  Button
} from 'react-native';


export default class firstapp extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require('./Packit_title.png')} />
        <TextInput
          style={styles.account}
          />       
        <TextInput
          style={styles.account}
        />

        <View style={styles.button}>
          <Button
            title="Login" 
            color="#c47735"

          /> 
          <Button 
            title="Sign Up" 
            color="#c47735"
          /> 
        </View>

        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />

      </View>
    );
  }
}


class ChatScreen extends Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const firstappNav = StackNavigator({
  Home: { screen: firstapp },
  Chat: { screen: ChatScreen },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f49542',
  },
  account: {
    backgroundColor: '#ffffff',
    height: 40, 
    borderColor: 'gray', 
    borderWidth: 1,
    marginBottom: 10,
    width: 200
  },
  button: {
  flexDirection: 'row',
  }
});

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

Answer 1

您正在导出无法访问firstapp道具的navigation组件，因为没有任何内容传递给它。您需要导出导航器组件firstappNav。

AppRegistry.registerComponent('firstapp', () => firstappNav);

Answer 2

这是因为在firstapp组件中未定义props对象。您必须覆盖其构造函数才能访问props。 Read this

理解＆＃34; undefined不是一个对象（＆＃39; this.props.navigation.navigate）＆＃34;

2 个答案: