React Native 实例 - 房产搜索App
React Native 开发已经初见端倪,可以完成最基本的功能. 通过开发一些简单的应用,可以更加熟练的掌握 RN 的知识. 本文介绍非常简单的一款房产搜索的App,通过调用公开的搜索服务,把网络的数据展示在应用中. 通过代码更多的了解 RN 的特性.
已经实现 iOS 版本,仅供学习和参考,可以直接运行,但是 RN 变化较快,可能不兼容. 关于在运行项目中可能出现的问题,请参考. 主要内容:
本文源码的GitHub下载地址
配置项目初始化 React Native 的项目. react-native init WclPropertyFinder 修改 Android 的 Gradle 构建版本. dependencies { classpath 'com.android.tools.build:gradle:1.2.3' }
运行 iOS 和 Android 项目.
修改 // 使用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 开发应用非常快捷,可以复用代码逻辑到多个平台.
OK,that’s all! Enjoy it!
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- actionscript-3 – Adob??e Air AS3,处理窗口,探查器建议库
- ruby-on-rails – 如何在Heroku上使用最新版本的Imagemagic
- ruby-on-rails-3 – 使用MetaSearch进行默认排序
- c – boost :: dynamic_pointer_cast,const指针不工作?
- ruby-on-rails – Heroku docker部署
- reactjs – 画布库如何适应Flux Pattern和React?
- MVC4 Ajax在执行下一个进程之前等待
- 多年来对聚合和组合的误区
- c# – 使用WebBrowser访问DOM
- c# – 检查Windows电源管理是否关闭了显示屏