TypeError with TouchableHighlight：undefined不是对象（评估＆＃39; this.props.navigator.push＆＃39;）

Question

我是React native的新手，我正在练习如何通过http请求从屏幕传递数据。

方法_executeQuery(query)出错。我不知道在哪里修改以使其工作，例如，在SearchResults.js navigator ={navigator}中添加var passProps = {listings: response.listings};，但它们都不能正常工作。

元素＆＃39; Navigator＆＃39;在RN 0.45中弃用。我不知道 此错误是否与“导航器”相关。

index.android.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  AppRegistry,
  Image,
  Button,
  Dimensions
} from 'react-native';
import {
    StackNavigator,
    TabNavigator
} from 'react-navigation';
import SearchScreen from './SearchScreen';
import SearchResults from'./SearchResults';

var scale =Dimensions.get('window').scale;
var wwidth = Dimensions.get('window').width; //full width
var hheight = Dimensions.get('window').height; //full height

var styles = StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 30
  },
  container: {
    flex: 1
  },
  icon:{
    width: 0.05 * wwidth * scale,
    height: 0.05 * hheight *scale,
    margin: 5
  }
});

class HomeScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Welcome',
      headerLeft: (
          <TouchableHighlight onPress={() => {navigation.navigate('Home')} } >
              <Image source={require('./Resources/images/house-icon.png')} style={styles.icon} />
          </TouchableHighlight>
      ),
      headerRight: (
          <TouchableHighlight onPress={() => {navigation.navigate('Search')} } > 
              <Image source={require('./Resources/images/search-icon.png')} style={styles.icon} />
          </TouchableHighlight>
      ),
      headerTitleStyle :{
        textAlign: 'center',
        alignSelf:'center'
      },
    };
  };

  render() {
    return (
      <View>
        <Text>Hello, Demo!</Text>
      </View>
    );
  }
}


const RNProject = StackNavigator({
  Home: { screen: HomeScreen },
  Search: { screen: SearchScreen },
  SearchResults: {screen: SearchResults}
});

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

SearchScreen.js

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

function urlForQueryAndPage(key, value, pageNumber) {
  var data = {
      country: 'uk',
      pretty: '1',
      encoding: 'json',
      listing_type: 'buy',
      action: 'search_listings',
      page: pageNumber
  };
  data[key] =value;
  var querystring = Object.keys(data)
    .map(key => key + '=' + encodeURIComponent(data[key]))
    .join('&');

  return 'http://api.nestoria.co.uk/api?' + querystring;
};


class SearchScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
    title: 'Search by Place',
    };
  };

  //initialization
  constructor(props) {
    super(props);

    this.state = {
      searchString: 'London',
      isLoading: false,
      message: ''
    };
  }

  onSearchTextChanged(event)  {
    this.setState({ searchString: event.nativeEvent.text });
  }

  _executeQuery(query){
    this.setState({ isLoading: true });
    fetch(query)
    .then(response => response.json())
    .then(json => this._handleResponse(json.response))
    .catch(error =>
      this.setState({
        isLoading: false,
        message: 'Something bad happened ' + error
    }));

  }

  onSearchPressed()  {
    var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  }

  _handleResponse(response){
    try{
      var passProps = {listings: response.listings};
      this.setState({ isLoading: false , message: '' });
      if (response.application_response_code.substr(0, 1) === '1') {
        this.props.navigator.push({
          title: 'Results',
          component: SearchResults,
          passProps: passProps
        });
      } else {
        this.setState({ message: 'Location not recognized; please try again.'});
      }
    } catch(error) 
    { 
      alert(error); 
    }
  }

  render(){
    let spinner = this.state.isLoading ?
    ( <ActivityIndicator size='large'/> ) : ( <View />);

    return (
     <View>
        <Image> {spinner} </Image>
        <View style={styles.container}>
          <Text style={styles.description}>
            Search for houses to buy!
          </Text>
          <Text style={styles.description}>
            Search by place-name, postcode or search near your location.
          </Text>
        </View>
        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            value={this.state.searchString}
            onChange={this.onSearchTextChanged.bind(this)}
            placeholder='Search via name or postcode'/>
          <TouchableHighlight style={styles.button} underlayColor='#99d9f4'
            onPress={this.onSearchPressed.bind(this)} navigator={navigator}>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>
        <View style={styles.flowRight}>
          <TouchableHighlight style={styles.button} 
              underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Location</Text>
          </TouchableHighlight>
        </View>
        <Text style={styles.description}>{this.state.message}</Text>
      </View>
    );
  }
}



var styles = StyleSheet.create({
  description: {
    marginBottom: 10,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 10,
    marginTop: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  flowRight: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC'
  }
});
module.exports = SearchScreen;

SearchResults.js

import React, { Component } from 'react'
import {
  StyleSheet,
  Image,
  View,
  TouchableHighlight,
  ListView,
  Text
} from 'react-native';
import {
    StackNavigator,
    TabNavigator
} from 'react-navigation';


class SearchResults extends Component {
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource(
      {rowHasChanged: (r1, r2) => r1.lister_url !== r2.lister_url});
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.listings)
    };
  }

  renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableHighlight underlayColor='#dddddd' >
        <View>
          <Text>{rowData.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
        navigator={this.props.navigator}>
      </ListView>
    );
  }

}
module.exports = SearchResults;