React Native 实例 - 房产搜索App

欢迎Follow我的GitHub, 关注我的CSDN, 未经授权, 禁止转载.

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

更多: http://www.wangchenlong.org/



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

主要内容:

使用Navigator栈跳转页面.

使用fetch请求网络数据.

使用ListView展示列表数据.

本文源码的GitHub下载地址

欢迎Follow我的GitHub: https://github.com/SpikeKing

配置项目

初始化 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!

最初发布地址:

http://www.wangchenlong.org/2016/04/12/1604/121-rn-property-demo/

欢迎Follow我的GitHub, 关注我的简书, 微博, CSDN, 掘金.

我已委托“维权骑士”为我的文章进行维权行动. 未经授权, 禁止转载, 授权或合作请留言.