Question

我在React Native中遇到以下错误，并查看过具有相同问题的人员的多个帖子，我仍然没有运气解决这个问题。不确定究竟是什么导致了这个问题。

这是我的APP.JS代码

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},
});

这是我的主题。我与所有组成部分的主要观点

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}
});

React Native Error“undefined不是对象（评估'_this2.props.navigation.navigate'）”

1 个答案: