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!

總結

以上是生活随笔為你收集整理的React Native实例之房产搜索APP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。