我的应用找不到导航器变量 - “ReferenceError：找不到变量：导航器”

Question

希望你能帮助我。

我正在与 react-native 合作，根据我正在学习的教程开发一个简单的应用程序。问题是它有“导航器”，我不能让它工作。让我分享我的代码：

index.android.js

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Navigator } from 'react-native';
import SearchPage from './SearchPage';

    class PropertyFinder extends React.Component {
      render() {
        return (
          <Navigator
            initialRoute={{ title: 'Pagina Busqueda', index: 0 }}
            renderScene={(route, navigator) => {
              return <SearchPage title={route.title} />
            }}
          />
        );
      }
    }

    AppRegistry.registerComponent('Project', () => PropertyFinder);

这是另一个文件：SearchPage.js

    import React, { Component } from 'react'
    import { StyleSheet, Text, TextInput, View, TouchableHighlight, ActivityIndicator, Image, Navigator } from 'react-native';
    import SearchResults from './SearchResults';

export default class SearchPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchString: 'london',
      message: ''
    };
  }
  onSearchTextChanged(event) {
    this.setState({ searchString: event.nativeEvent.text });
  }
  _executeQuery(query) {
    console.log(query);
    fetch(query)
    .then(response => response.json())
    .then(json => this._handleResponse(json.response))
    .catch(error =>
    this.setState({
      message: 'Something bad happened ' + error
    }));
  }

  onSearchPressed() {
    var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  }
  _handleResponse(response) {
    this.setState({ message: '' });
    if (response.application_response_code.substr(0, 1) === '1') {
      const nextIndex = route.index + 1;
      navigator.push({
        title: 'Results ' + nextIndex,
        index: nextIndex,
        component: SearchResults,
        passProps: {listings: response.listings}
      });  
    } else {
      this.setState({ message: 'Location not recognized; please try again.'});
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.description}>
          Buscar casas para compra !!!
        </Text>
        <Text style={styles.description}>
          Busca por área, CP, o cerca de tu ubicación.
        </Text>
        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            value={this.state.searchString}
            onChange={this.onSearchTextChanged.bind(this)}
            placeholder='Búsqueda por nombre o CP'/>
          <TouchableHighlight style={styles.button}
              underlayColor='#99d9f4' onPress={this.onSearchPressed.bind(this)}>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>
        <TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Location</Text>
        </TouchableHighlight>
        <Image source={require('./Resources/house.png')} style={styles.image}/>
        <Text style={styles.description}>{this.state.message}</Text>
      </View>
    );
  }
}
function urlForQueryAndPage(key, value, pageNumber) {
  return 'http://api.nestoria.co.uk/api?country=uk&pretty=1&encoding=json&listing_type=buy&action=search_listings&page=1&place_name=london';
};

还有一个名为 SearchResults.js 的文件，但我认为没有必要分享它，因为问题发生在 SearchPage.js。

当我的应用尝试执行指令时（在 _handleResponse 方法上）：

const nextIndex = route.index + 1;
      navigator.push({
        title: 'Results ' + nextIndex,
        index: nextIndex,
        component: SearchResults,
        passProps: {listings: response.listings}
      });  

我收到错误消息：ReferenceError: Can't find variable: route（navigator 如果我删除了路由内容）

有人可以帮我解决这个问题吗？

问候！

Answer 1

您需要将 navigator 传递给 SearchPage

<SearchPage title={route.title} navigator={navigator}/>

然后您可以使用 this.props 从 searchPage 访问导航器

 this.props.navigator.push({
        title: 'Results ' + nextIndex,
        index: nextIndex,
        component: SearchResults,
        passProps: {listings: response.listings}
      });  

并且不要忘记在searchPage的构造函数中绑定_handleResponse，否则会是未定义的

this._handleResponse=this._handleResponse.bind(this)