Javascript undefined不是对象（计算'；"this.props.navigator.push'；"）

我正在尝试从主屏幕导航到另一个屏幕（测试）。下面有“Homescreen.js”。一旦我点击register按钮，我就会得到上面提到的错误

我已经做了一整天了，但似乎找不到一个直截了当的答案

错误出现在我的“Homescreen.js”（附加屏幕截图错误）上

错误指向：

this.props.navigator.push

在

\u handleRegisterView

函数下

HomeScreen.js

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

import Test from './Test';

import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'SpeedHack',
  };

  _handleRegisterView = () => {

    this.props.navigator.push({
      title: 'Test',
      component: Test,
      backButtonTitle: 'Back'
    })
    //alert('Register button Pressed!.');
  }

render() {
    return (

      <View style={styles.container}>
        <TouchableHighlight onPress={this._handleRegisterView}>
          <Text style={[styles.button, styles.blueButton]}>
            Register
          </Text></View>
    );
  }
}

从“React”导入React；
进口{
样式表，
文本，
看法
异步存储，
组成部分，
触控高光，
评价学
}从“反应本机”；
从“./Test”导入测试；
从“react navigation”导入{StackNavigator}；
类主屏幕扩展了React.Component{
静态导航选项={
标题：“SpeedHack”，
};
_HandlerRegisterView=（）=>{
这个是.props.navigator.push({
标题:"测试",，
组成部分：测试，
backButtonTitle:“返回”
})
//警报（'按下登记按钮！'）；
}
render（）{
返回(
登记
);
}
}

js（实际上不做任何有趣的事情，加载一个图像）

从“React”导入React；
从“react native”导入{组件、样式表、文本、视图、图像}；
类测试扩展了React.Component{
render（）{
设pic={
uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
返回(
老兄！要香蕉吗？
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

你似乎很困惑。在

react-navigation

中，为了推送屏幕，您不必使用

this.props.navigator.push

，而是使用

this.props.navigation.navigate
我对react-Native还不太熟悉，让我试试out@MalcolmMaima可以找到一个例子
import React from 'react';
import { Component, StyleSheet, Text, View, Image } from 'react-native';

class Test extends React.Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={styles.container}>
        <Text>Ssup Dude! Want some bananas?</Text>
        <Image source = {pic} style = {{width: 300, height: 300}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});