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

Posted 2023-02-16

【中文标题】我的应用找不到导航器变量 - “ReferenceError：找不到变量：导航器”

【英文标题】：My app doesn't find navigator variables - "ReferenceError: Can't find variable: navigator"

【发布时间】：2017-03-02 16:39:28

【问题描述】：

希望你能帮助我。

我正在与 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 如果我删除了路由内容）

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

问候！

【参考方案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)

【讨论】：

oooo 伙计...你是一个大师，可以识别 navigator 变量，现在很好。谢谢！！！