美文网首页iOS开发Hybrid开发react native
ReactNative实例 - 房产搜索App

ReactNative实例 - 房产搜索App

作者: SpikeKing | 来源:发表于2016-04-13 06:31 被阅读1237次

欢迎Follow我的GitHub, 关注我的简书.

React Native 开发已经初见端倪, 可以完成最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 本文介绍非常简单的一款房产搜索的App, 通过调用公开的搜索服务, 把网络的数据展示在应用中. 通过代码更多的了解 RN 的特性.

Logo

已经实现 iOS 版本, 仅供学习和参考, 可以直接运行, 但是 RN 变化较快, 可能不兼容. 关于在运行项目中可能出现的问题, 请参考.

主要内容:

  1. 使用Navigator栈跳转页面.
  2. 使用fetch请求网络数据.
  3. 使用ListView展示列表数据.

本文源码的GitHub下载地址


配置项目

初始化 React Native 的项目.

react-native init WclPropertyFinder

修改 Android 的 Gradle 构建版本.

dependencies {
    classpath 'com.android.tools.build:gradle:1.2.3'
}

运行 iOS 和 Android 项目.

调试: iOS 模拟机, Cmd + R 重新加载, Cmd + D 模拟晃动; Android, 晃动手机.

修改index.ios.js的内容, 设置启动模块. 使用NavigatorIOS加载组件搜索页SearchPage.

// 使用Navigator管理组件, 注意: 不要纠结于跨平台, 学习为主
class WclPropertyFinderApp extends React.Component {
  render() {
    return (
      <React.NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: '搜房产',
          component: SearchPage,
        }}/>
    );
  }
}

注册组件WclPropertyFinderApp至应用WclPropertyFinder.

React.AppRegistry.registerComponent('WclPropertyFinder', () => WclPropertyFinderApp);

首页搜索

搜索页(SearchPage)包含一个搜索库, 可以使用地址或邮编搜索英国的房产信息.

通过输入框的参数创建网络请求URL, 并把请求发送出去, 获取信息.

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

在获取网络请求URL后, 使用fetch函数获取数据.

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

处理返回的Json数据, 使用Navigator跳转到搜索结果SearchResults页面.

  _handleResponse(response) {
    this.setState({isLoading: false, message: ''});
    if (response.application_response_code.substr(0, 1) === '1') {
      console.log('Properties found: ' + response.listings.length);

      // 使用listings调用结果页面SearchResults
      this.props.navigator.push({
        title: '搜索结果',
        component: SearchResults,
        passProps: {listings: response.listings}
      });
    } else {
      this.setState({message: 'Location not recognized; please try again.'});
    }
  }

搜索结果

把获取的房产信息, 逐行渲染并显示于ListView中.

  renderRow(rowData, sectionID, rowID) {
    var price = rowData.price_formatted.split(' ')[0];
    return (
      <TouchableHighlight
        onPress={()=>this.rowPressed(rowData.guid)}
        underlayColor='#dddddd'>
         // 布局...
      </TouchableHighlight>
    );
  }

ListView设置数据源dataSource, 每行渲染renderRow.

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

点击ListView的行, 可以跳转至房产信息页面.

  rowPressed(propertyGuid) {
    var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
    this.props.navigator.push({
      title: '房产信息',
      component: PropertyView,
      passProps: {property: property}
    });
  }

房产信息

房产信息是单纯显示页面, 显示图片和文字内容.

class PropertyView extends Component {
  render() {
    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 (
       // 布局...
    );
  }
}

最终效果

动画

使用 RN 开发应用非常快捷, 复用逻辑到多个平台, 节省开发成本, 不过目前正在完善中.

本文参考我的朋友Tom的一篇文章.

OK, that's all! Enjoy it!

相关文章

网友评论

  • MRNAN_:原来是返回的数据格式变了。刚刚看了一下数据格式,好像是和以前的有所改变,新的数据里面没有guid 这个属性值,所以应该根据cellID从listings 里面去取每个cell 对应的数据 : var property = this.props.listings[propertyGuid]; ,同时, onPress={()=>this._rowPress(rowID)}>这里面传的参数也应该改成rowID。
  • MRNAN_:cell 的点击需要修改,每次点击不同的cell进去显示的详情内容都是第一个cell 的详情数据。也就是说 var property = this.props.listings.filter(prop =>prop.rowID === propertyGuid)[0];
    这句话的判断条件就一直没起作用,一直获取的是总数据的第一个数组
  • RicardoMJiang:你好,我根据你的版本实现了android版本,有时间的话可以看一看。链接地址[房产搜索APP安卓版](https://github.com/whuhan2013/propertysearch)
    SpikeKing:@whuhan2013 赞!
  • VictoryForYou:你的github上的工程 运行时候报错 终端也是一样
    SpikeKing:@VictoryForYou
    这里面是开发环境: http://www.wangchenlong.org/2016/04/07/1604/071-rn-uiexplorer/
    哈哈, 都是连续写的, 欢迎讨论!
    VictoryForYou:@SpikeKing 请问你是用什么开发react IDE
    SpikeKing:@VictoryForYou
    参考
    http://www.wangchenlong.org/2016/04/07/1604/071-rn-uiexplorer/
    http://www.wangchenlong.org/2016/04/11/1604/111-rn-open-project/
    确认环境配置是否正确.

本文标题:ReactNative实例 - 房产搜索App

本文链接:https://www.haomeiwen.com/subject/ggswlttx.html