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调用结果页面SearchResultsnavigator.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}><TextInputstyle={styles.searchInput}value={this.state.searchString}onChange={this.onSearchTextChanged.bind(this)} // bind确保使用组件的实例placeholder='Search via name or postcode'/><TouchableHighlightstyle={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.navigatormynav2:mynav}});}/*** 渲染列表视图的每一行* @param rowData 行数据* @param sectionID 块ID* @param rowID 行ID* @returns {XML} 页面*/renderRow(rowData, sectionID, rowID) {var price = rowData.price_formatted.split(' ')[0];return (<TouchableHighlightonPress={()=>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 (<ListViewdataSource={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!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/493972.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

“间谍芯片”疑云:谁在撒谎?警示何在?

芯片级安全没有终点来演&#xff1a;科学网摘要&#xff1a;10月5日起&#xff0c;一则“苹果、亚马逊被卷入&#xff0c;中国黑客利用微芯片入侵美国”的消息不胫而走&#xff0c;消息所波及的中美科技企业的股价应声下跌。10月5日起&#xff0c;一则“苹果、亚马逊被卷入&…

Extjs4前端开发代码规范参考

准则&#xff1a; 一致性&#xff0c; 隔离与统一管理&#xff0c; 螺旋式重构改进&#xff0c; 消除重复&#xff0c; 借鉴现有方案 1. 保证系统实现的一致性&#xff0c;寻求一致性方案&#xff0c; 相同或相似功能尽量用统一模式处理&#xff1b; 2. 尽可能使用隔离技…

数据结构之最小生成树

prime算法 普里姆(Prim)算法&#xff0c;是用来求加权连通图的最小生成树的算法。 基本思想 对于图G而言&#xff0c;V是所有顶点的集合&#xff1b;现在&#xff0c;设置两个新的集合U和T&#xff0c;其中U用于存放G的最小生成树中的顶点&#xff0c;T存放G的最小生成树中…

打造无所不及的智能:徐直军发布华为AI战略及全栈全场景方案

来源&#xff1a;C114通信网摘要&#xff1a;选择正确的问题比寻找新奇的方案更重要。“这是一个伟大的时代&#xff0c;华为立志为推动人类进步和世界繁荣做出贡献。2017年底&#xff0c;我们提出了新的愿景和使命&#xff0c;‘把数字世界带入每个人、每个家庭、每个组织&…

同步博客到CSDN

经过一些朋友的多次邀请&#xff0c;现同步博客到CSDN&#xff0c;地址:http://blog.csdn.net/knightswarrior。 转载于:https://www.cnblogs.com/KnightsWarrior/p/BackupToCSDN.html

四超多强 一文看懂中国CV独角兽格局

来源&#xff1a;网易智能通过短短两三年的攻城略地&#xff0c;中国CV&#xff08;Computer Vision&#xff0c;计算机视觉&#xff09;行业形成“四超多强”的格局。商汤、云从、依图、旷视还被称为“四小龙”&#xff0c;他们之间的故事由来已久&#xff0c;谈及最多的当属他…

http://www.shengshiyouxi.com

android从Linux系统启动有4个步骤&#xff1b; (1) init进程启动 (2) Native服务启动 (3) System Server&#xff0c;Android服务启动 (4) Home启动 总体启动框架图如&#xff1a; 第一步&#xff1a;initial进程(system\core\init) init进程&…

清华 Aminer 发布最新2018人脸识别研究报告

来源&#xff1a;专知AMiner平台由清华大学计算机系研发&#xff0c;拥有我国完全自主知识产权。平台包含了超过2.3亿学术论文/专利和1.36亿学者的科技图谱&#xff0c;提供学者评价、专家发现、智能指派、学术地图等科技情报专业化服务。 今日&#xff0c;该平台发布最新的201…

敏捷实践:比每日会议更疯狂的半日会议!

由“每周例会”说起 每天项目例会的话&#xff0c;频率太高了&#xff0c;可能会浪费时间&#xff0c;如果每月一次&#xff0c;似乎时间太长了&#xff0c;于是我们往往会“每周例会”。 有一次我参加了某项目的每周例会&#xff0c;开会的时间是周五&#xff0c;会上其中一位…

智能生产的现状与未来!

来源&#xff1a;数字化企业北京机械工业自动化研究所首席专家蒋明炜先生是我国最早投身企业管理及其信息化事业的专家之一&#xff0c;积累了宝贵的理论实践经验&#xff0c;在国家提出《中国制造2025》之后&#xff0c;蒋明炜先生作为该领域资深专家&#xff0c;先后组织领导…

82岁的北大教授证明了黎曼猜想?

来源&#xff1a;AI科技大本营最近&#xff0c;黎曼猜想有点热。上个月&#xff0c;89 岁的菲尔兹奖与阿贝尔奖双料得主、英国皇家学会院士迈克尔阿蒂亚爵士&#xff08;Michael Atiyah&#xff09;刚刚宣布自己证明了黎曼猜想。近日&#xff0c;82 岁的北大教授&#xff08;已…

Atlas机器人再秀逆天操作!波士顿动力科研or商业化,将何去何从?

来源&#xff1a;物联网智库在众多机器人相关的技术公司里&#xff0c;波士顿动力的核心特点在于&#xff0c;他们始终将「仿生」看作机器人设计的最高宗旨。其创始人Raibert 也称自己的目的是建造一种能和动物以及人一模一样的&#xff0c;完成一切事情的机器人。这既是波士顿…

OpenGL6-纹理动画

代码下载 #include "CELLWinApp.hpp"#include <gl/GLU.h>#include <assert.h>#include <math.h>#pragma comment(lib,"opengl32.lib")#pragma comment(lib,"glu32.lib")#pragma comment(lib,"winmm.lib") /*** 这个…

《科学美国人》:美国应保持太空、网络、生物领域的科技优势

来源&#xff1a;美国《科学美国人》转自&#xff1a;国防科技要闻&#xff08;ID&#xff1a;CDSTIC&#xff09;作者&#xff1a;军事科学院军事科学信息研究中心 吴海近日&#xff0c;美国《科学美国人》杂志发表《我们准备好迎接未来战争了吗&#xff1f;》一文&#xff…

微信开发入门

微信开发需要搭建PHP环境 参考链接&#xff1a;Apache2.2与php5.3.5如何整合&#xff1f;如何能够被使用_百度经验 搭建的过程出现了很多坑&#xff0c;只能小心&#xff0c;重复搭建了&#xff0c;错误原因可能是VC9或VC11环境没有配置的原因&#xff0c;多试试才行。 然后…

实现计算机界“大满贯”,芮勇博士再获技术成就大奖

来源&#xff1a;联想研究院近日&#xff0c;国际计算机协会&#xff08;ACM&#xff09;多媒体专委会&#xff08;Special Interest Group on Multimedia&#xff0c;简称SIGMM&#xff09;2018技术成就奖揭晓了。在全球众多的候选人当中&#xff0c;该奖最终花落联想集团首席…

机器人流程自动化崛起,中国是否准备好迎接智能自动化时代?

来源&#xff1a;亿欧智库摘要&#xff1a;机器人流程自动化&#xff08;Robotic Process Automation, RPA&#xff09;正迅速成为企业改善服务、提高效率和降低成本的关键工具。对此&#xff0c;PWC针对国内RPA市场展开了调查&#xff0c;预计未来45%的工作活动可以实现自动化…

加州伯克利大学:自动驾驶中虚拟到现实的强化学习|厚势汽车

来源&#xff1a;同济智能汽车研究所UCB 提出了虚拟场景到真实场景的翻译网络&#xff0c;解决强化学习用于自动驾驶虚拟测试中与现实测试的差异。强化学习需要大量的试错&#xff0c;而真实的自动驾驶车辆&#xff08;AV&#xff09;无法提供大量的试错为此 AV 强化学习使用虚…

2019年机器学习:追踪人工智能发展之路

作者&#xff5c;Hussain Fakhruddin编译&#xff5c;专知整理&#xff5c;Yingying&#xff0c;李大囧摘要&#xff1a;“智能助理”的时代已经到来了。机器学习已经成为全球数字化转型的关键要素之一 ,在企业领域&#xff0c;机器学习用例的增长在过去几年中也是显著的。预计…

价值2950亿美元的「量子霸权」,技术水平到了哪个阶段

来源&#xff1a;36Kr摘要&#xff1a;谁掌握了量子计算机&#xff0c;谁就可能引领下一次信息革命。当前经典计算体系&#xff0c;并不能解决所有问题。量子计算将给现有的计算理论带来深刻变革&#xff0c;将极大加深人类对物质与信息的理解&#xff1b;将是一种前所未有的计…