React Native Error「未定義不是對象（正在評估'_this2.props.navigation.navigate'）」

Question

我在React Native中收到以下錯誤，並查看了多個有相同問題的人的帖子，米仍然沒有任何運氣解決這個問題。不確定是什麼原因造成這個問題。

這裏是我的APP.JS CODE

import * as Expo from 'expo'; 
import React from 'react'; 
import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity, FlatList } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import { withNavigation } from 'react-navigation'; 
import HostClient from './app/Views/HostClientView'; 
import ClientQueue from './app/Views/ClientQueue'; 
import SearchBarr from './app/components/Searchbar'; 


export default class App extends React.Component { 
    static navigationOptions = { 
     title: 'Welcome', 
    }; 

render() { 
    return (
    <Image style = {styles.container} source={require('./app/images/jukebox-background.jpg')} resizeMode="cover"> 
     <View> 
      <HostClient /> 
     </View> 
    </Image> 
    ); 
} 

const SimpleApp = StackNavigator({ 
    HostClientView: { screen: HostClient }, 
    ClientQueueView: { screen: ClientQueue}, 
}); 

這裏是我的HOSTCLIENT.JS這是我提出的主要查看所有組件

import React from 'react'; 
import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity, 
FlatList } from 'react-native'; 
import Host from '../../components/Host/Host.js'; 
import UserRequest from '../../components/UserRequest/UserRequest.js'; 
import { StackNavigator } from 'react-navigation'; 
import Button from 'react-native-button'; 



export default class HostClient extends React.Component { 

    render() { 
     return (
     <View> 
      <Host /> 
      <UserRequest /> 
      <Button style = {styles.button} title="ClientQueueView" 
     onPress={() => this.props.navigation.navigate('ClientQueueView') }> <Image style = {styles.turntable} source={require('../../images/vinyl2.png')} resizeMode="contain"/> 
      </Button> 
     </View> 
    ); 
    } 
} 

最後這裏是user.js的文件

// Request Component 

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


export default class UserRequest extends Component { 

static navigationOptions = ({navigation}) => { 
const {state, navigate} = navigation; 
return { 
    title: 'Noah Testing' 
}; 
}; 

constructor() { 
super(); 
this.state = { 
    address: [], 
    refreshing: false, 
    page: 1, 
    lastPage: 1, 
    loading: true, 
    listOpacity: 0, 
}; 
} 



render() { 
return (
    <View > 
    <Text > Request </Text> 
    <Button title="ClientQueueView" 
     onPress={() => this.props.navigation.navigate('ClientQueueView') }> <Image style = {styles.turntable} source={require('../../images/vinyl2.png')} resizeMode="contain"/> 
    </Button> 
    </View> 
); 
} 
} 

Answer 1

APP.JS 
import * as Expo from 'expo'; 
import React from 'react'; 
import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity, 
FlatList, Button } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 


import HostClient from './app/Views/HostClientView'; 
import ClientQueue from './app/Views/ClientQueue'; 
import SearchBarr from './app/components/Searchbar'; 

const AppNavigator = StackNavigator({ 
HostClientView: { screen: HostClient }, 
ClientQueueView: { screen: ClientQueue} 
}); 

export default class App extends React.Component { 

    constructor(){ 
    super(); 
    } 
    static navigationOptions = { 
title: 'Welcome', 
}; 

render() { 
return (
    <Image style = {styles.container} source= 
{require('./app/images/jukebox-background.jpg')} resizeMode="cover"> 
    <View> 
    <AppNavigator ref={nav => { this.navigator = nav; }} /> 
    </View> 
    </Image> 
); 
} 
} 

HOSTCLIENT.JS 

import React from 'react'; 
import { StyleSheet, Text, AppRegistry, View, Image, TouchableOpacity, 
FlatList, Button } from 'react-native'; 
import Host from '../../components/Host/Host.js'; 
import UserRequest from '../../components/UserRequest/UserRequest.js'; 
import { StackNavigator } from 'react-navigation'; 
import ClientQueue from '../ClientQueue'; 




export default class HostClient extends React.Component { 

constructor(){ 
super(); 
} 

someEvent() { 
// call navigate for AppNavigator here: 
this.navigator && this.navigator.dispatch({ type: 'Navigate', 
routeName, params }); 
} 

render() { 

return (

    <View> 
     <Host /> 
     <UserRequest nav={this.props.navigation}/> 
    </View> 
); 
} 
} 
const AppNavigator = StackNavigator({ 
ClientQueueView: { screen: ClientQueue} 
}); 

USERREQUEST.JS 
// Request Component 

import React, { Component } from 'react'; 
import { StyleSheet, AppRegistry, Text, View, Image } from 'react- 
native'; 
import Button from 'react-native-button'; 
import { StackNavigator } from 'react-navigation'; 
import ClientQueue from '../../Views/ClientQueue'; 


export default class UserRequest extends Component { 
constructor(){ 
super(); 
} 

someEvent() { 
// call navigate for AppNavigator here: 
this.navigator && this.navigator.dispatch({ type: 'Navigate', 
routeName, params }); 
} 

render() { 
return (
    <View style = {styles.view}> 
    <Text style = {styles.request}> Request </Text> 
    <Button style = {styles.button} onPress={() => 
this.props.nav.navigate('ClientQueueView')}> <Image style = 
{styles.turntable} source={require('../../images/vinyl2.png')} 
resizeMode="contain"/> 
    </Button> 
    </View> 
); 
} 
} 

const AppNavigator = StackNavigator({ 
ClientQueueView: { screen: ClientQueue} 
});