undefined不是对象（评估'this.props.navigation.navigate'）

Question

此index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ActionSheetIOS,
  CameraRoll,
  ListView,
  TouchableOpacity,
  Platform,
  ScrollView,
  Dimensions,
  TouchableHighlight,
  TouchableWithoutFeedback
} from 'react-native';

const util=require('util');
import Thumbnail from './App/Thumbnail';
import MaxImage from './App/MaxImage';
import Router from './App/Router';
import {StackNavigator} from 'react-navigation';
export default class PrinterApp extends Component {

  render() {

    return (

         <ScrollView style={styles.ScrollContainer}>
       <View style={styles.container}>

          <Thumbnail style={styles.thumbnail}  url="https://facebook.github.io/react/img/logo_og.png"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="https://facebook.github.io/react/img/logo_og.png"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="https://facebook.github.io/react/img/logo_og.png"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="https://facebook.github.io/react/img/logo_og.png"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
          <Thumbnail style={styles.thumbnail}  url="http://i.imgur.com/UePbdph.jpg"/>
         </View>
       </ScrollView>

    );
  }
}

const styles = StyleSheet.create({
  ScrollContainer:{
    flex:1,
  },
  container:{
    flex:1,
    flexDirection:'row',
    flexWrap:'wrap',
  },
  thumbnail:{
    margin:2,
    width:(Dimensions.get('window').width)/3,
    justifyContent:'center',
    alignItems: 'center',      
      }
});

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

这是Thumbnail.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
  TouchableHighlight,
} from 'react-native';
import ResponsiveImage from 'react-native-responsive-image';
import MaxImage from './MaxImage';
import {StackNavigator} from 'react-navigation';

 class Thumbnail extends React.Component {
  press(url)
  {
     alert("button pressed"+{url});
     this.props.navigation.navigate('MaxImge');
  }
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
      var url=this.props.url;
       var width=(Dimensions.get('window').width/3)+13;
       const { navigate } = this.props.navigation;
    return (
      <TouchableHighlight onPress={this.press.bind(url)}>
      <View style={{justifyContent: 'center',padding:2}}>
                <View style={{flexDirection: 'row',}}>
                    <ResponsiveImage source={{uri:url}} initWidth={width} initHeight="138"/>
                </View>
            </View>
          </TouchableHighlight>


    );
  }
}

export const SimpleApp = StackNavigator({
  Home: { screen: Thumbnail },
});

AppRegistry.registerComponent('Thumbnail', () => SimpleApp);

这是MaxImage.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions,
} from 'react-native';
import ResponsiveImage from 'react-native-responsive-image';
import Button from 'react-native-button';


 class MaxImage extends Component {
   static navigationOptions={
     title:'MaxImage'
   };
  render() {
       var url=this.props.url;
       var width=(Dimensions.get('window').width)+48;
       var height=(Dimensions.get('window').height);
    return (
       <View>
        <Text>
          HI!
        </Text>
      </View>
    );
  }
  getPrint()
  {

  }
  getBlock()
  {

  }
}

module.exports=MaxImage;

我想要做的是当应用程序启动它时应该在网格视图中显示照片，当点击特定缩略图时，它应该显示带有一些选项的缩放图像。

有人可以帮忙吗？我已经尝试了各种网站上提供的每个解决方案，但我无法解决此问题。 请有人建议我一些反应导航的好教程。