ReactNative之GD（十五）搜索模块及设置模块

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


/*** 设置页面*/
import React, { Component } from &＃39;react&＃39;;
import {StyleSheet,Text,View,Image,TouchableOpacity,ScrollView,
} from &＃39;react-native&＃39;;// 引入自定义导航栏组件
import CommunalNavBar from &＃39;../main/GDCommunalNavBar&＃39;;
// 引入 设置页 Cell组件
import SettingsCell from &＃39;./GDSettingsCell&＃39;;export default class GDSettings extends Component {// 返回上一页pop() {this.props.navigator.pop();}// 返回左边按钮renderLeftItem() {// 将组件返回出去return( {this.pop()}}>返回);}// 返回中间按钮renderTitleItem() {return(设置);}render() {return({/* 导航栏样式 */} this.renderLeftItem()}titleItem &＃61; {() &＃61;> this.renderTitleItem()}/>{/* 内容 */}{/* 第一个cell */}{/* 第二个cell */})}
}const styles &＃61; StyleSheet.create({container: {flex:1},navbarLeftItemStyle: {width:20,height:20,marginLeft:15,},navbarTitleItemStyle: {fontSize:17,color:&＃39;black&＃39;,marginRight:50},scollViewStyle: {backgroundColor:&＃39;white&＃39;,},
});


/*** 设置页 Cell*/
import React, { Component, PropTypes } from &＃39;react&＃39;;
import {StyleSheet,View,Image,Text,Switch,Platform,
} from &＃39;react-native&＃39;;export default class GDSettingsCell extends Component {static propTypes &＃61; {leftTitle:PropTypes.string,isShowSwitch:PropTypes.bool,};// 构造constructor(props) {super(props);// 初始状态this.state &＃61; {isOn:false,};}// 返回需要的组件renderRightContent() {let component;if (this.props.isShowSwitch) { // 显示 Switch 按钮component &＃61; {this.setState({isOn: !this.state.isOn})}} />}else {component &＃61; }return(component)}render() {return({/* 左边 */}{this.props.leftTitle}{/* 右边 */}{this.renderRightContent()})}
}const styles &＃61; StyleSheet.create({container: {flex:1,flexDirection:&＃39;row&＃39;,height:Platform.OS &＃61;&＃61;&＃61; &＃39;ios&＃39; ? 44 : 36,justifyContent:&＃39;space-between&＃39;,alignItems:&＃39;center&＃39;,borderBottomColor:&＃39;gray&＃39;,borderBottomWidth:0.5,marginLeft:15,},rightViewStyle:{marginRight:15,},arrowStyle: {width:10,height:10,}
});