1.搜索模块
GDSearch.js
/** * 搜索页面 */import React, { Component } from 'react';import { StyleSheet, Text, View, TouchableOpacity, Image, ListView, Dimensions, ActivityIndicator, Modal, // 模态 AsyncStorage, // 缓存数据库(数据持久化) TextInput, // 输入框组件} from 'react-native';// 引入 下拉刷新组件import {PullList} from 'react-native-pull';// 导航器import CustomerComponents, { Navigator} from 'react-native-deprecated-custom-components';// 获取屏幕宽高const {width, height} = Dimensions.get('window');// 监听 键盘函数const dismissKeyboard = require('dismissKeyboard');// 引入自定义导航栏组件import CommunalNavBar from '../main/GDCommunalNavBar';// 引入 公共cellimport CommunalCell from '../main/GDCommunalCell';// 引入 详情页 组件import CommunalDetail from '../main/GDCommunalDetail';// 引入 空白页组件import NoDataView from '../main/GDNoDataView';export default class GDSearch extends Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = { dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}), // 数据源 优化 loaded: false, // 用于判断是否显示空白页 isModal: false, // 用于判断模态的可见性 }; // 全局定义一个空数组用于存储列表数据 this.data = []; this.changeText = ''; // 绑定 this.loadData = this.loadData.bind(this); this.loadMore = this.loadMore.bind(this); } // 加载最新数据网络请求 loadData(resolve) { if (!this.changeText) return; let params = { "q" : this.changeText }; HTTPBase.get('http://guangdiu.com/api/getresult.php', params) .then((responseData) => { // 情况数组(刷新时) this.data = []; // 拼接数据 this.data = this.data.concat(responseData.data); // 重新渲染 this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.data), loaded:true, }); // 关闭刷新动画 if (resolve !== undefined){ setTimeout(() => { resolve(); }, 1000); } // 存储数组中最后一个元素的id let searchLastID = responseData.data[responseData.data.length - 1].id; AsyncStorage.setItem('searchLastID', searchLastID.toString()); }) .catch((error) => { }) } // 加载更多数据的网络请求 loadMoreData(value) { let params = { "q" : this.changeText, "sinceid" : value }; HTTPBase.get('http://guangdiu.com/api/getresult.php', params) .then((responseData) => { // 拼接数据 this.data = this.data.concat(responseData.data); this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.data), loaded:true, }); // 存储数组中最后一个元素的id let searchLastID = responseData.data[responseData.data.length - 1].id; AsyncStorage.setItem('searchLastID', searchLastID.toString()); }) .catch((error) => { }) } // 加载更多数据操作 loadMore() { // 读取id AsyncStorage.getItem('searchLastID') .then((value) => { // 数据加载操作 this.loadMoreData(value); }) } // 返回上一页 pop() { // 回收键盘 dismissKeyboard(); this.props.navigator.pop(); } // 返回左边按钮 renderLeftItem() { // 将组件返回出去 return( {this.pop()}} > ![]()
返回 ); } // 返回中间按钮 renderTitleItem() { return( 搜索全网折扣 ); } // ListView尾部 renderFooter() { return ( ); } // 根据网络状态决定是否渲染 listView renderListView() { if(this.state.loaded === false) { // 显示空白页 return( this.loadData(resolve)} // 数据源 通过判断dataSource是否有变化,来判断是否要重新渲染 dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} // 隐藏水平线 showsHorizontalScrollIndicator={false} style={styles.listViewStyle} initialListSize={7} // 默认渲染数据条数 // 返回 listView 头部 renderHeader={this.renderHeader} // 上拉加载更多 onEndReached={this.loadMore} onEndReachedThreshold={60} renderFooter={this.renderFooter} /> ); } } // 通过id 跳转详情页 pushToDetail(value) { this.props.navigator.push({ component:CommunalDetail, params: { url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value } }) } // 返回每一行cell的样式 renderRow(rowData) { // 使用cell组件 return( this.pushToDetail(rowData.id)} > ); } render() { return ( {/* 导航栏样式 */} this.renderLeftItem()} titleItem = {() => this.renderTitleItem()} /> {/* 顶部工具栏 */} {/* 左边 */} ![]()
{this.changeText = text}} // 监听文本改变,将文字返回 onEndEditing={() => this.loadData()} // 结束编辑状态 /> {/* 右边 */} this.pop()} > 取消 {/* 根据网络状态决定是否渲染 listview */} {this.renderListView()} ); }}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', }, navbarLeftItemStyle: { width:20, height:20, marginLeft:15, }, navbarTitleItemStyle: { fontSize:17, color:'black', marginRight:50 }, toolsViewStyle: { width:width, height:44, flexDirection:'row', alignItems:'center', justifyContent:'space-between', }, inputViewStyle: { height:35, flexDirection:'row', alignItems:'center', justifyContent:'center', backgroundColor:'rgba(239,239,241,1.0)', marginLeft:10, borderRadius:5 }, searchImageStyle: { width:15, height:15, marginLeft:8 }, textInputStyle: { width:width * 0.75, height:35, marginLeft:8 }, listViewStyle: { width:width, },});
监听 键盘函数
// 监听 键盘函数const dismissKeyboard = require('dismissKeyboard');// 返回上一页pop() { // 回收键盘 dismissKeyboard(); this.props.navigator.pop();}
效果图：
2.设置模块
GDSettings.js
/** * 设置页面 */import React, { Component } from 'react';import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView,} from 'react-native';// 引入自定义导航栏组件import CommunalNavBar from '../main/GDCommunalNavBar';// 引入 设置页 Cell组件import SettingsCell from './GDSettingsCell';export default class GDSettings extends Component { // 返回上一页 pop() { this.props.navigator.pop(); } // 返回左边按钮 renderLeftItem() { // 将组件返回出去 return( {this.pop()}} > ![]()
返回 ); } // 返回中间按钮 renderTitleItem() { return( 设置 ); } render() { return( {/* 导航栏样式 */} this.renderLeftItem()} titleItem = {() => this.renderTitleItem()} /> {/* 内容 */} {/* 第一个cell */} ) }}const styles = StyleSheet.create({ container: { flex:1 }, navbarLeftItemStyle: { width:20, height:20, marginLeft:15, }, navbarTitleItemStyle: { fontSize:17, color:'black', marginRight:50 }, scollViewStyle: { backgroundColor:'white', },});
GDSettingsCell.js
/** * 设置页 Cell */import React, { Component, PropTypes } from 'react';import { StyleSheet, View, Image, Text, Switch, Platform,} from 'react-native';export default class GDSettingsCell extends Component { static propTypes = { leftTitle:PropTypes.string, isShowSwitch:PropTypes.bool, }; // 构造 constructor(props) { super(props); // 初始状态 this.state = { isOn:false, }; } // 返回需要的组件 renderRightContent() { let component; if (this.props.isShowSwitch) { // 显示 Switch 按钮 component = {this.setState({isOn: !this.state.isOn})}} /> }else { component = ![]()
} return( component ) } render() { return( {/* 左边 */} {this.props.leftTitle} {/* 右边 */} {this.renderRightContent()} ) }}const styles = StyleSheet.create({ container: { flex:1, flexDirection:'row', height:Platform.OS === 'ios' ? 44 : 36, justifyContent:'space-between', alignItems:'center', borderBottomColor:'gray', borderBottomWidth:0.5, marginLeft:15, }, rightViewStyle:{ marginRight:15, }, arrowStyle: { width:10, height:10, }}); 效果图：
.