React-Native 之 GD （十八）监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能
监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能
原版 APP 中当我们点击 首页和海淘 2个 Item 时，会马上获取最新数据个数然后进行更新，这边来实现一下这个功能。
1.通过通知的方式监听Item点击做相应的操作，所以我们在需要接收通知的页面注册一下通知，在需要的地方发送通知即可：
步骤一：在 home 界面注册通知
// 组件加载完成
componentDidMount() {
// 注册通知
this.subscription = DeviceEventEmitter.addListener('clickHomeItem', () => this.clickTabBarItem());
}
步骤二：在页面销毁之前记得注销下：
componentWillUnmount() {
// 注销通知
this.subscription.remove();
}
步骤三：clickTabBarItem 方法逻辑：
// 点击了Item
clickTabBarItem() {
// 加载最新数据
this.loadData();
}
2.回到 Main 页面，我们修改下点击 Item 响应的事件：
步骤一：修改 Item 点击事件：
onPress={() => this.clickItem(selectedTab, subscription)}>
步骤二：clickItem 方法逻辑：
// 点击了Item
clickItem(selectedTab, subscription) { if (subscription !== "" && this.state.selectedTab == selectedTab) {
// 发送通知
DeviceEventEmitter.emit(subscription);
} // 渲染页面
this.setState({ selectedTab: selectedTab })
}
步骤三：所以传值也需要新增 subscription 参数，不需要订阅的按钮就可以传 "" 即可。
每次点击 Item 获取到最新数据后我们需要及时更新 Item 角标
实现思路很简单，我们使用逆传的方式，每次获取到最新数据的时候，同时需要调用一下 在 main 中 获取最新数据个数 的请求方法即可。
步骤一：首先我们在 home 定义一个属性供外界使用：
static defaultProps = {
loadDataNumber:{}, // 回调
};
步骤二：接着，当我们请求到最新数据的同时，我们调用一下这个属性，就可以了：
// 获取最新数据个数
this.loadDataNumber(); // loadDataNumber 中的逻辑
loadDataNumber() {
// 调用 this.props.loadDataNumber 中保存的代码块
this.props.loadDataNumber();
}
步骤三：为了方便调用，我们将 获取最新数据个数 的逻辑抽出来放到单独的方法内，这边顺便再介绍 AsyncStorage 怎么同时获取多个 key 值的方法：
// 获取最新数据个数网络请求
loadDataNumber() {
// 取出id
AsyncStorage.multiGet(['cnfirstID', 'usfirstID'], (error, stores) => {
// 拼接参数
let params = {
"cnmaxid" : stores[0][1],
"usmaxid" : stores[1][1],
}; // 请求数据
HTTPBase.get('http://guangdiu.com/api/getnewitemcount.php', params)
.then((responseData) => {
this.setState({
cnbadgeText:responseData.cn,
usbadgeText:responseData.us
})
})
.catch((error) => { })
});
}
步骤四：很好，接着我们转到 main 中，修改下 renderTabBarItem 方法中的内容，实现一下 “ 属性的方法：
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params}
navigator={navigator}
loadDataNumber={() => this.loadDataNumber()} />
}}
一键置顶功能
这个功能实现更加简单，只要我们调用 ScrollView 的 scrollTo 方法，将 y 设置为 0 即可；因为 ListView 是在 ScrollView 上进行的二次开发，所以它可以使用 ScrollView 的所有方法：
// 点击了Item
clickTabBarItem() {
let PullList = this.refs.pullList;
// 一键置顶
PullList.scrollTo({y:0});
}
完整代码：
GDMain.js
/**
* 主页面
* 通过此文件连接其他文件
*/
import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
View,
Image,
Platform,
DeviceEventEmitter,
AsyncStorage,
} from 'react-native'; // tab组件(第三方框架)
import TabNavigator from 'react-native-tab-navigator';
// 导航器
import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components'; // 引入其他组件
import Home from '../home/GDHome';
import HT from '../ht/GDHt';
import HourList from '../hourList/GDHourList';
// 引入 HTTP封装组件
import HTTP from '../http/HTTPBase'; // 引入 本地数据存储封装组件 (数据持久化)
// import RealmStorage from '../storage/realmStorage'; export default class GD extends Component {
// ES6
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
selectedTab: 'home', // 首选页面
isHiddenTabBar:false, // 是否隐藏tabbar
cnbadgeText:'', // 首页Item角标文本
usbadgeText:'', // 海淘Item角标文本
};
} // 获取最新数据个数网络请求
loadDataNumber() {
// 取出id
AsyncStorage.multiGet(['cnfirstID','usfirstID'],(error, stores) => {
// 拼接参数
let params = {
"cnmaxid" : stores[0][1],
"usmaxid" : stores[1][1]
}; // 请求数据
HTTPBase.get('http://guangdiu.com/api/getnewitemcount.php', params)
.then((responseData) => {
// 修改 状态值
this.setState({
cnbadgeText:responseData.cn,
usbadgeText:responseData.us
})
})
.catch((error) => { })
});
} // 设置 Navigator 转场动画
setNavAnimationType(route) {
if(route.animationType) { // 有值
let conf = route.animationType;
conf.gestures = null; // 关闭返回手势
return conf;
}else{
return Navigator.SceneConfigs.PushFromRight; // 默认转场动画
}
} // 隐藏 TabBar
hiddenTabBar(data) {
this.setState({
isHiddenTabBar:data,
})
} // 点击了Item
clickItem(selectedTab, subscription) {
if(subscription !== "" && this.state.selectedTab == selectedTab){
// 发送通知
DeviceEventEmitter.emit(subscription);
}
// 渲染页面
this.setState({selectedTab: selectedTab})
} // 返回 TabBar 的 Item
renderTabBarItem(title, selectedTab, image, selectedImage, component, badgeText, subscription) {
return (
<TabNavigator.Item
selected={this.state.selectedTab === selectedTab}
badgeText={badgeText == 0 ? '' : badgeText} // 角标
title={title}
selectedTitleStyle={{color:'black'}}
renderIcon={() => <Image source={{uri:image}} style={styles.tabbarIconStyle} />}
renderSelectedIcon = {() => <Image source={{uri:selectedImage}} style={styles.tabbarIconStyle} />}
onPress = {() => this.clickItem(selectedTab, subscription)}>
<Navigator
// 设置路由
initialRoute = {
{
name: selectedTab,
component: component
}
} // 设置导航动画
configureScene={(route) => this.setNavAnimationType(route)} renderScene = {
(route, navigator) => {
let Component = route.component;
return <Component
{...route.params}
navigator={navigator}
loadDataNumber={() => this.loadDataNumber()}
/>
}
} />
</TabNavigator.Item>
);
} // 组件加载完成
componentDidMount() {
// 注册通知
this.subscription = DeviceEventEmitter.addListener('isHiddenTabBar', (data)=>{this.hiddenTabBar(data)}); // 最新数据的个数
setInterval(() => {
this.loadDataNumber();
},3000)
} // 组件即将销毁
componentWillUnmount() {
// 销毁
this.subscription.remove();
} render() {
return (
<TabNavigator
tabBarStyle={this.state.isHiddenTabBar !== true ? {} : {height:0, overflow:'hidden'}}
sceneStyle={this.state.isHiddenTabBar !== true ? {} : {paddingBottom:0}}
>
{ /* 首页 */ }
{this.renderTabBarItem("首页", 'home', 'tabbar_home_30x30', 'tabbar_home_selected_30x30', Home, this.state.cnbadgeText, "clickHomeItem")}
{ /* 海淘 */ }
{this.renderTabBarItem("海淘", 'ht', 'tabbar_abroad_30x30', 'tabbar_abroad_selected_30x30', HT, this.state.usbadgeText, "clickHTItem")}
{ /* 小时风云榜 */ }
{this.renderTabBarItem("小时风云榜", 'hourlist', 'tabbar_rank_30x30', 'tabbar_rank_selected_30x30', HourList)}
</TabNavigator>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
tabbarIconStyle: {
width: Platform.OS === 'ios' ? 30 : 25,
height: Platform.OS === 'ios' ? 30 : 25,
}
});
GDHome.js
/**
* 首页
*/
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
ListView,
Dimensions,
ActivityIndicator,
Modal, // 模态
AsyncStorage, // 缓存数据库(数据持久化)
DeviceEventEmitter, // 通知
InteractionManager, // 解决跳转卡顿问题
} from 'react-native'; // 引入 下拉刷新组件
import {PullList} from 'react-native-pull';
// 导航器
import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components'; // 获取屏幕宽高
const {width, height} = Dimensions.get('window'); // 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';
// 引入 公共cell
import CommunalCell from '../main/GDCommunalCell';
// 引入 详情页 组件
import CommunalDetail from '../main/GDCommunalDetail';
// 引入 筛选菜单组件
import CommunalSiftMenu from '../main/GDCommunalSiftMenu';
// 引入 近半小时热门组件
import HalfHourHot from './GDHalfHourHot';
// 引入 搜索页面组件
import Search from '../main/GDSearch';
// 引入 空白页组件
import NoDataView from '../main/GDNoDataView'; // 数据 筛选菜单
import HomeSiftData from '../data/HomeSiftData.json'; export default class GDHome extends Component { // 初始化(默认)
static defaultProps = {
loadDataNumber:{} // 回调
} // 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}), // 数据源 优化
loaded: false, // 用于判断是否显示空白页
isHalfHourHotModal: false, // 用于判断模态的可见性
isSiftModal: false, // 筛选功能
};
// 全局定义一个空数组用于存储列表数据
this.data = [];
// 绑定
this.loadData = this.loadData.bind(this);
this.loadMore = this.loadMore.bind(this);
} // 加载最新数据网络请求
loadData(resolve) { let params = {"count" : 10 }; HTTPBase.get('https://guangdiu.com/api/getlist.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);
} // 获取最新数据个数(角标)
this.loadDataNumber(); // 存储数组中最后一个元素的id
let cnlastID = responseData.data[responseData.data.length - 1].id;
AsyncStorage.setItem('cnlastID', cnlastID.toString()); // 只能存储字符或字符串 // 首页存储数组中第一个元素的id
let cnfirstID = responseData.data[0].id;
AsyncStorage.setItem('cnfirstID', cnfirstID.toString()); // // 清除本地存储的数据
// RealmBase.removeAllData('HomeData'); // // 存储数据到本地
// RealmBase.create('HomeData', responseData.data); // 向数据表存储数据
})
.catch((error) => {
// // 数据加载失败,拿到本地存储的数据,展示出来,如果没有存储,那就显示无数据页面
// this.data = RealmBase.loadAll('HomeData'); // 从数据表提取数据 // // 重新渲染
// this.setState({
// dataSource: this.state.dataSource.cloneWithRows(this.data),
// loaded:true,
// });
})
} // 加载更多数据的网络请求
loadMoreData(value) { let params = {
"count" : 10,
"sinceid" : value
}; HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
.then((responseData) => { // 拼接数据
this.data = this.data.concat(responseData.data); // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.data),
loaded:true,
}); // 存储数组中最后一个元素的id
let cnlastID = responseData.data[responseData.data.length - 1].id;
AsyncStorage.setItem('cnlastID', cnlastID.toString()); // 只能存储字符或字符串 })
.catch((error) => { })
} // 加载筛选数据网络请求
loadSiftData(mall, cate) { let params = {}; if(mall === "" && cate === ""){ // 全部
this.loadData(undefined);
return;
} if(mall === ""){ // cate 有值
params = {
"cate" : cate
};
}else{
params = {
"mall" : mall
};
} HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
.then((responseData) => { // 情况数组(刷新时)
this.data = []; // 拼接数据
this.data = this.data.concat(responseData.data); // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.data),
loaded:true,
}); // 存储数组中最后一个元素的id
let cnlastID = responseData.data[responseData.data.length - 1].id;
AsyncStorage.setItem('cnlastID', cnlastID.toString()); // 只能存储字符或字符串
})
.catch((error) => { })
} // 获取最新数据个数
loadDataNumber() {
this.props.loadDataNumber();
} // 加载更多数据操作
loadMore() {
// 读取存储的id
AsyncStorage.getItem('cnlastID')
.then((value) => {
// 数据加载操作
this.loadMoreData(value);
})
} // 模态到近半小时热门
pushToHalfHourHot() {
this.setState({
isHalfHourHotModal: true
})
} // 跳转到搜索页面
pushToSearch() {
InteractionManager.runAfterInteractions(() => {
this.props.navigator.push({
component: Search,
});
});
} // 安卓模态销毁模态
onRequestClose() {
this.setState({
isHalfHourHotModal:false,
isSiftModal:false,
})
} // 关闭模态
closeModal(data) {
this.setState({
isHalfHourHotModal:data,
isSiftModal:data,
})
} // 显示筛选菜单
showSiftMenu() {
this.setState({
isSiftModal:true,
})
} // 跳转到详情页
pushToDetail(value) {
InteractionManager.runAfterInteractions(() => {
this.props.navigator.push({
component:CommunalDetail,
params: {
url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
}
});
});
} // 点击了Item
clickTabBarItem() {
// 一键置顶
this.refs.pullList.scrollTo({y:0});
} // 返回左边按钮
renderLeftItem() {
// 将组件返回出去
return(
<TouchableOpacity
onPress={() => {this.pushToHalfHourHot()}}
>
<Image source={{uri:'hot_icon_20x20'}} style={styles.navbarLeftItemStyle} />
</TouchableOpacity>
);
} // 返回中间按钮
renderTitleItem() {
return(
<TouchableOpacity
// 显示或隐藏筛选菜单
onPress={() => {this.showSiftMenu()}}
>
<Image source={{uri:'navtitle_home_down_66x20'}} style={styles.navbarTitleItemStyle} />
</TouchableOpacity>
);
} // 返回右边按钮
renderRightItem() {
return(
<TouchableOpacity
// 跳转搜索页面
onPress={() => {this.pushToSearch()}}
>
<Image source={{uri:'search_icon_20x20'}} style={styles.navbarRightItemStyle} />
</TouchableOpacity>
);
} // ListView尾部
renderFooter() {
return (
<View style={{height: 100}}>
<ActivityIndicator />
</View>
);
} // 返回每一行cell的样式
renderRow(rowData) {
// 使用cell组件
return(
<TouchableOpacity
// 给每一个cell添加点击事件
onPress={() => this.pushToDetail(rowData.id)}
>
<CommunalCell
image={rowData.image}
title={rowData.title}
mall={rowData.mall} // 平台
pubTime={rowData.pubtime} // 时间
fromSite={rowData.fromsite} // 来源
/>
</TouchableOpacity>
);
} // 根据网络状态决定是否渲染 listView
renderListView() {
if(this.state.loaded === false) {
// 显示空白页
return(
<NoDataView />
);
}else{
return(
<PullList // 将ListView 改为 PullList
ref="pullList" // 一键置顶
// 下拉刷新
onPullRelease={(resolve) => 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}
/>
);
}
} // 组件加载完成
componentDidMount() {
// 刷新数据
this.loadData(); // 注册通知
this.subscription = DeviceEventEmitter.addListener('clickHomeItem', () => this.clickTabBarItem())
} render() {
return (
<View style={styles.container}>
{/* 初始化近半小时热门模态 */}
<Modal
animationType='slide' // 动画 底部弹窗
transparent={false} // 透明度
visible={this.state.isHalfHourHotModal} // 可见性
onRequestClose={() => this.onRequestClose()} // 销毁
>
<Navigator
initialRoute={{
name:'halfHourHot',
component:HalfHourHot
}} renderScene={(route, navigator) => {
let Component = route.component;
return <Component
removeModal={(data) => this.closeModal(data)}
{...route.params}
navigator={navigator} />
}} />
</Modal> {/* 初始化筛选菜单模态 */}
<Modal
animationType='none' // 无动画
transparent={true} // 为透明状态
visible={this.state.isSiftModal} // 可见性
onRequestClose={() => this.onRequestClose()} // 销毁
>
<CommunalSiftMenu
removeModal={(data) => this.closeModal(data)}
data={HomeSiftData}
loadSiftData={(mall, cate) => this.loadSiftData(mall, cate)}
/>
</Modal> {/* 导航栏样式 */}
<CommunalNavBar
leftItem = {() => this.renderLeftItem()}
titleItem = {() => this.renderTitleItem()}
rightItem = {() => this.renderRightItem()}
/> {/* 根据网络状态决定是否渲染 listView */}
{this.renderListView()}
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
navbarLeftItemStyle: {
width:20,
height:20,
marginLeft:15,
},
navbarTitleItemStyle: {
width:66,
height:20,
},
navbarRightItemStyle: {
width:20,
height:20,
marginRight:15,
}, listViewStyle: {
width:width,
},
});
GDHt.js
/**
* 海淘折扣
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
ListView,
Dimensions,
ActivityIndicator,
Modal, // 模态
AsyncStorage, // 缓存数据库(数据持久化)
DeviceEventEmitter, // 通知
InteractionManager, // 解决跳转卡顿问题
} from 'react-native'; // 引入 下拉刷新组件
import {PullList} from 'react-native-pull';
// 导航器
import CustomerComponents, {
Navigator
} from 'react-native-deprecated-custom-components'; // 获取屏幕宽高
const {width, height} = Dimensions.get('window'); // 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar';
// 引入 cell
import CommunalCell from '../main/GDCommunalCell';
// 引入 详情页 组件
import CommunalDetail from '../main/GDCommunalDetail';
// 引入 筛选菜单组件
import CommunalSiftMenu from '../main/GDCommunalSiftMenu';
// 引入 近半小时热门组件
import USHalfHourHot from './GDUSHalfHourHot';
// 引入 搜索页面组件
import Search from '../main/GDSearch';
// 引入 空白页组件
import NoDataView from '../main/GDNoDataView'; // 数据 筛选菜单
import HTSiftData from '../data/HTSiftData.json'; export default class GDHome extends Component { // 初始化(默认)
static defaultProps = {
loadDataNumber:{} // 回调
} // 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}), // 数据源 优化
loaded: false, // 用于判断是否显示空白页
isUSHalfHourHotModal: false, // 用于判断模态的可见性
isSiftModal: false, // 筛选功能
};
// 全局定义一个空数组用于存储列表数据
this.data = [];
// 绑定
this.loadData = this.loadData.bind(this);
this.loadMore = this.loadMore.bind(this);
} // 加载最新数据网络请求
loadData(resolve) { let params = {
"count" : 10,
"country" : "us"
}; HTTPBase.get('https://guangdiu.com/api/getlist.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);
} // 获取最新数据个数(角标)
this.loadDataNumber(); // 存储数组中最后一个元素的id
let uslastID = responseData.data[responseData.data.length - 1].id;
AsyncStorage.setItem('uslastID', uslastID.toString()); // 只能存储字符或字符串 // 首页存储数组中第一个元素的id
let usfirstID = responseData.data[0].id;
AsyncStorage.setItem('usfirstID', usfirstID.toString()); // // 清除本地存储的数据
// RealmBase.removeAllData('HomeData'); // // 存储数据到本地
// RealmBase.create('HomeData', responseData.data); // 向数据表存储数据
})
.catch((error) => {
// // 数据加载失败,拿到本地存储的数据,展示出来,如果没有存储,那就显示无数据页面
// this.data = RealmBase.loadAll('HomeData'); // 从数据表提取数据 // // 重新渲染
// this.setState({
// dataSource: this.state.dataSource.cloneWithRows(this.data),
// loaded:true,
// });
})
} // 加载更多数据的网络请求
loadMoreData(value) { let params = {
"count" : 10,
"country" : "us",
"sinceid" : value
}; HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
.then((responseData) => { // 拼接数据
this.data = this.data.concat(responseData.data); // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.data),
loaded:true,
}); // 存储数组中最后一个元素的id
let uslastID = responseData.data[responseData.data.length - 1].id;
AsyncStorage.setItem('uslastID', uslastID.toString()); // 只能存储字符或字符串 })
.catch((error) => { })
} // 加载筛选数据网络请求
loadSiftData(mall, cate) { let params = {}; if(mall === "" && cate === ""){ // 全部
this.loadData(undefined);
return;
} if(mall === ""){ // cate 有值
params = {
"cate" : cate,
"country" : "us"
};
}else{
params = {
"mall" : mall,
"country" : "us"
};
} HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
.then((responseData) => { // 情况数组(刷新时)
this.data = []; // 拼接数据
this.data = this.data.concat(responseData.data); // 重新渲染
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.data),
loaded:true,
}); // 存储数组中最后一个元素的id
let cnlastID = responseData.data[responseData.data.length - 1].id;
AsyncStorage.setItem('cnlastID', cnlastID.toString()); // 只能存储字符或字符串
})
.catch((error) => { })
} // 获取最新数据个数
loadDataNumber() {
this.props.loadDataNumber();
} // 加载更多数据操作
loadMore() {
// 读取存储的id
AsyncStorage.getItem('uslastID')
.then((value) => {
// 数据加载操作
this.loadMoreData(value);
})
} // 模态到近半小时热门
pushToHalfHourHot() {
this.setState({
isUSHalfHourHotModal: true
})
} // 跳转到搜索页面
pushToSearch() {
InteractionManager.runAfterInteractions(() => {
this.props.navigator.push({
component: Search,
});
});
} // 安卓模态销毁模态
onRequestClose() {
this.setState({
isUSHalfHourHotModal:false,
isSiftModal:false
})
} // 关闭模态
closeModal(data) {
this.setState({
isUSHalfHourHotModal:data,
isSiftModal:data
})
} // 显示筛选菜单
showSiftMenu() {
this.setState({
isSiftModal:true,
})
} // 跳转详情页
pushToDetail(value) {
InteractionManager.runAfterInteractions(() => {
this.props.navigator.push({
component:CommunalDetail,
params: {
url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
}
});
});
} // 点击了Item
clickTabBarItem() {
// 一键置顶
this.refs.pullList.scrollTo({y:0});
} // 返回左边按钮
renderLeftItem() {
// 将组件返回出去
return(
<TouchableOpacity
onPress={() => {this.pushToHalfHourHot()}}
>
<Image source={{uri:'hot_icon_20x20'}} style={styles.navbarLeftItemStyle} />
</TouchableOpacity>
);
} // 返回中间按钮
renderTitleItem() {
return(
<TouchableOpacity
// 显示或隐藏筛选菜单
onPress={() => {this.showSiftMenu()}}
>
<Image source={{uri:'navtitle_home_down_66x20'}} style={styles.navbarTitleItemStyle} />
</TouchableOpacity>
);
} // 返回右边按钮
renderRightItem() {
return(
<TouchableOpacity
// 跳转搜索页面
onPress={() => {this.pushToSearch()}}
>
<Image source={{uri:'search_icon_20x20'}} style={styles.navbarRightItemStyle} />
</TouchableOpacity>
);
} // ListView尾部
renderFooter() {
return (
<View style={{height: 100}}>
<ActivityIndicator />
</View>
);
} // 返回每一行cell的样式
renderRow(rowData) {
// 使用cell组件
return(
<TouchableOpacity
// 给每一个cell添加点击事件
onPress={() => this.pushToDetail(rowData.id)}
>
<CommunalCell
image={rowData.image}
title={rowData.title}
mall={rowData.mall} // 平台
pubTime={rowData.pubtime} // 时间
fromSite={rowData.fromsite} // 来源
/>
</TouchableOpacity>
);
} // 根据网络状态决定是否渲染 listView
renderListView() {
if(this.state.loaded === false) {
// 显示空白页
return(
<NoDataView />
);
}else{
return(
<PullList // 将ListView 改为 PullList
ref="pullList" // 一键置顶
// 下拉刷新
onPullRelease={(resolve) => 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}
/>
);
}
} // 组件加载完成
componentDidMount() {
// 加载最新数据
this.loadData(); // 注册通知
this.subscription = DeviceEventEmitter.addListener('clickHTItem', () => this.clickTabBarItem())
} render() {
return (
<View style={styles.container}>
{/* 初始化近半小时热门模态 */}
<Modal
animationType='slide' // 动画 底部弹窗
transparent={false} // 透明度
visible={this.state.isUSHalfHourHotModal} // 可见性
onRequestClose={() => this.onRequestClose()} // 销毁
>
<Navigator
initialRoute={{
name:'ushalfHourHot',
component:USHalfHourHot
}} renderScene={(route, navigator) => {
let Component = route.component;
return <Component
removeModal={(data) => this.closeModal(data)}
{...route.params}
navigator={navigator} />
}} />
</Modal> {/* 初始化筛选菜单模态 */}
<Modal
animationType='none' // 无动画
transparent={true} // 为透明状态
visible={this.state.isSiftModal} // 可见性
onRequestClose={() => this.onRequestClose()} // 销毁
>
<CommunalSiftMenu
removeModal={(data) => this.closeModal(data)}
data={HTSiftData}
loadSiftData={(mall, cate) => this.loadSiftData(mall, cate)}
/>
</Modal> {/* 导航栏样式 */}
<CommunalNavBar
leftItem = {() => this.renderLeftItem()}
titleItem = {() => this.renderTitleItem()}
rightItem = {() => this.renderRightItem()}
/> {/* 根据网络状态决定是否渲染 listView */}
{this.renderListView()}
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
navbarLeftItemStyle: {
width:20,
height:20,
marginLeft:15,
},
navbarTitleItemStyle: {
width:66,
height:20,
},
navbarRightItemStyle: {
width:20,
height:20,
marginRight:15,
}, listViewStyle: {
width:width,
},
});
.
React-Native 之 GD （十八）监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能的更多相关文章
- React.js 小书 Lesson9 - 事件监听
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...
- React文档（十八）最佳性能
在内部,React使用好几种聪明的技巧去最小化更新UI所需要的DOM操作.对于很多应用来说,使用React会使得构建用户界面非常之快而且不需要做太多专门的性能优化.虽然如此,还是有一些方法可以让你为R ...
- React Native学习（十）—— 生命周期
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- React router内是如何做到监听history改变的
问题背景 今天面试的时候,被问到这么个问题.在html5的history情况下,pushstate和replacestate是无法触发pushstate的事件的,那么他是怎么做到正确的监听呢?我当时给 ...
- Android监听Button和ImageButton控件的点击事件
一.onClick事件 Button和ImageButton都有一个onClick事件,通过自身的.setOnClickListener(OnClickListener)方法添加点击事件 所有的控件都 ...
- miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题
最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. <div id="pageGrid ...
- Flex里监听mouseDownOutside事件解决弹出窗口点击空白关闭功能
其实当用户在使用 PopUpManager 打开的某个组件外部单击时,会从该组件分派一个mouseDownOutside事件 监听该事件就能实现点击空白处关闭窗口的功能 this.addEventLi ...
- Android RecyclerView滑动监听，判断是否滑动到了最后一个item
项目中的需求,RecyclerView横向滑动列表,要有加载更多的功能,给RecyclerView设置一个滑动监听,在onScrolled方法中判断一下滑动方向,然后在onScrollStateCha ...
- 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
随机推荐
- Linux命令学习（0）
作为一名前端,可能接触到linux的机会并不多,但这不代表就不需要学.对我而言,学习linux主要是为了方便部署我的项目到服务器,我并没有花时间去学这些,只是上网查怎么部署项目,然后按教程一步一步来, ...
- [多校联考2019(Round 5 T1)] [ATCoder3912]Xor Tree(状压dp)
[多校联考2019(Round 5)] [ATCoder3912]Xor Tree(状压dp) 题面 给出一棵n个点的树,每条边有边权v,每次操作选中两个点,将这两个点之间的路径上的边权全部异或某个值 ...
- Python 多列数据存储
zip()函数 zip函数可以把多个列表相加成一个tuple(元组) a = [1,2,3,4] b = [11,22,33,44] c = [111,222,333,444] A = list(zi ...
- spark性能调优03-shuffle调优
1.开启map端输出文件的合并机制 1.1 为什么要开启map端输出文件的合并机制 默认情况下,map端的每个task会为reduce端的每个task生成一个输出文件,reduce段的每个task拉取 ...
- 搜索专题：HDU1241 Oil Deposits
Oil Deposits Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...
- 搜索专题: HDU1429胜利大逃亡
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- 简洁的Asp.net菜单控件
http://www.cnblogs.com/ruinet/archive/2009/11/10/1599984.html asp.net自带的菜单控件采用的table和javascript,导致生成 ...
- 01-Django-urls
# Django系统- 环境 - python3.6 - django1.18- 参考资料 - [django中文教程](http://python.usyiyi.cn/)# 环境搭建- anacon ...
- k3 cloud中如何把一个账套中的单据部署到另一个账套中
打开bos,依次点击->解决方案->部署包管理 填写部署包名称并点击下一步 选择需要部署的单据并点击下一步 确定后点击下一步: 点击完成 找到部署路径会成一个部署包: 部署:打开部署包安装 ...
- tomcat 启动日志乱码，idea中运行Tomcat也出现中文乱码：“淇℃伅”
打开到tomcat安装目录下的conf/文件夹 修改logging.properties文件, 找到 java.util.logging.ConsoleHandler.encoding = utf-8 ...