React Native 开发已经初见端倪,可以完成最基本的功能. 通过开发一些简单的应用,可以更加熟练的掌握 RN 的知识. 本文介绍非常简单的一款房产搜索的App,通过调用公开的搜索服务,把网络的数据展示在应用中. 通过代码更多的了解 RN 的特性.
已经实现 iOS 版本,仅供学习和参考,可以直接运行,但是 RN 变化较快,可能不兼容. 关于在运行项目中可能出现的问题,请参考.
主要内容:
- 使用Navigator栈@R_516_404@面.
- 使用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;
}
_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.'});
}
}
搜索结果
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)} /> ); }
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,掘金. 我已委托“维权骑士”为我的文章进行维权行动. 未经授权,禁止转载,授权或合作请留言.
