React Native實例之房產搜索APP


React Native 開發越來越火了,web app也是未來的潮流, 現在react native已經可以完成一些最基本的功能. 通過開發一些簡單的應用, 可以更加熟練的掌握 RN 的知識. 在學習的過程,發現了一個房產搜索APP的實例,但只有ios版本,
本文主要是房產搜索APP的android版本實現。

原Ios版本
React Native 實例 - 房產搜索App Mystra

原版效果

主要內容:

  • 使用Navigator棧跳轉頁面.
  • 使用fetch請求網絡數據.
  • 使用ListView展示列表數據.

首頁搜索

搜索頁(SearchPage)包含一個搜索庫, 可以使用地址或郵編搜索英國的房產信息.

通過輸入框的參數創建網絡請求URL, 並把請求發送出去, 獲取信息.

/** * 訪問網絡服務的Api, 拼接參數 * 輸出: http://api.nestoria.co.uk/api?country=uk&pretty=1&encoding=json&listing_type=buy&action=search_listings&page=1&place_name=London * * @param key 最后一個參數的鍵, 用於表示地理位置 * @param value 最后一個參數的值, 具體位置 * @param pageNumber page的頁面數 * @returns {string} 網絡請求的字符串 */
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 SearchPage extends Component {

  /** * 構造器 * @param props 狀態 */
  constructor(props) {
    super(props);
    this.state = {
      searchString: 'London', // 搜索詞
      isLoading: false, // 加載
      message: '' // 消息
    };
  }

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


 /** * 執行網絡請求, 下划線表示私有 * @param query url * @private */
  _executeQuery(query) {
    console.log(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
      }));
  }

  /** * 處理網絡請求的回調 * @param response 請求的返回值 * @private */
  _handleResponse(response) {
    const { navigator } = this.props;
    this.setState({isLoading: false, message: ''});
    if (response.application_response_code.substr(0, 1) === '1') {
      console.log('123');
      console.log('Properties found: ' + response.listings);

      // 使用listings調用結果頁面SearchResults
      navigator.push({
        title: '搜索結果',
        component: SearchResults,
        index:1,
        params:{
                    listings:response.listings,
                    mynav:navigator

                }

      });
        console.log('456');
    } else {
      this.setState({message: 'Location not recognized; please try again.'});
    }
  }

  /** * 查詢的點擊事件 */
  onSearchPressed() {
    var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  }

  render() {
    var spinner = this.state.isLoading ?
      (<ActivityIndicator size='large'/>) : (<View/>);
    return (
      <View style={styles.container}>
        <Text style={styles.description}>
          搜索英國的房產
        </Text>
        <Text style={styles.description}>
          地址(London)/郵編(W1S 3PR)均可
        </Text>
        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            value={this.state.searchString}
            onChange={this.onSearchTextChanged.bind(this)} // bind確保使用組件的實例
            placeholder='Search via name or postcode'/>
          <TouchableHighlight
            style={styles.button}
            underlayColor='#99d9f4'
            onPress={this.onSearchPressed.bind(this)}>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>
        <Image source={require('./resources/house.png')}
               style={styles.image}/>
        {spinner}
        <Text style={styles.description}>
          {this.state.message}
        </Text>
      </View>
    );
  }
}

搜索結果

把獲取的房產信息, 逐行渲染並顯示於ListView中.

class SearchResults extends Component {

  /** * 構造器, 通過Navigator調用傳遞參數(passProps) * @param props 狀態屬性 */
  constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource(
      {rowHasChanged: (r1, r2) => r1.guid!== r2.guid}
    );
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.listings)
    };
  }

  /** * 點擊每行, 通過行數選擇信息 * @param propertyGuid 行ID */
  rowPressed(propertyGuid) {
    //var property = this.props.listings.filter(prop => prop.guid == propertyGuid)[0];
    var property=this.props.listings[propertyGuid];
    var mynav=this.props.mynav;
    mynav.push({
      title: '房產信息',
      component: PropertyView,
     index:2,
      params:{
                    property:property,
                    //navigator:this.props.navigator
                    mynav2:mynav

                }
    });
  }

  /** * 渲染列表視圖的每一行 * @param rowData 行數據 * @param sectionID 塊ID * @param rowID 行ID * @returns {XML} 頁面 */
  renderRow(rowData, sectionID, rowID) {
    var price = rowData.price_formatted.split(' ')[0];
    return (
      <TouchableHighlight
        onPress={()=>this.rowPressed(rowID)}
        underlayColor='#dddddd'>
        <View style={styles.rowContainer}>
          <Image style={styles.thumb} source={{uri:rowData.img_url}}/>
          <View style={styles.textContainer}>
            <Text style={styles.price}>${price}</Text>
            <Text style={styles.title} numberOfLines={1}>
              {rowData.title}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }

  /** * 渲染, 每行使用renderRow渲染 * @returns {XML} 結果頁面的布局 */
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
        />
    );
  }
}

房產信息
房產信息是單純顯示頁面, 顯示圖片和文字內容.

BackAndroid.addEventListener('hardwareBackPress', function() {
  if(_navigator == null){
    return false;
  }
  if(_navigator.getCurrentRoutes().length === 1){
    return false;
  }
  _navigator.pop();
  return true;
});

var _navigator ;
var PropertyView = React.createClass({
  getInitialState: function() {
     _navigator = this.props.mynav2;
    return {

    };
  },


  render: function() {
    var property = this.props.property; // 由SearchResult傳遞的搜索結果
    var stats = property.bedroom_number + ' bed ' + property.property_type;
    if (property.bathroom_number) {
      stats += ', ' + property.bathroom_number + ' ' +
        (property.bathroom_number > 1 ? 'bathrooms' : 'bathroom');
    }

    var price = property.price_formatted.split(' ')[0];

    return (
      <View> <View style={styles.container}> <Image style={styles.image} source={{uri: property.img_url}}/> <View style={styles.heading}> <Text style={styles.price}>${price}</Text> <Text style={styles.title}>{property.title}</Text> <View style={styles.separator}/> </View> <Text style={styles.description}>{stats}</Text> <Text style={styles.description}>{property.summary}</Text> </View> </View> ); } });

Codes

房產搜索APP安卓版

歡迎大家Follow,Star.

本文參考自wangchenlong

OK, that’s all! Enjoy it!


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com