webview返回收藏页componentWillReceiveProps方法没执行
来源:7-9 Favorite(收藏)模块列表页面具体实现-2
慕仔3427096
2018-08-23
从favorite点击进入详情页面 再点返回按钮 componentWillReceiveProps方法并没有执行 这个解决呢 我页面跳转用的是navigation.navigate 返回的时候没有法刷新组件重新调数据
import React from 'react';
import {
View, Text, TextInput, ListView, TouchableOpacity,
Image, StyleSheet, RefreshControl, DeviceEventEmitter } from 'react-native';
import NavigationBar from '../commons/navigationBar';
import { FLAG_STORAGE } from '../../tools/httpUtils';
import ListViewItem from '../commons/ListViewItem';
import TrendingItem from '../commons/TrendingItem';
import favoriteUtils from '../../tools/favoriteUtils';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
import ProjectModel from '../model/ProjectModel';
import FavoriteDao from '../commons/FavoriteDao';
export default class Popular extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
}
render() {
return (
<View style={styles.container}>
<NavigationBar title="收藏" />
<ScrollableTabView
tabBarBackgroundColor="#2196f3"
tabBarInactiveTextColor="mintcream"
tabBarActiveTextColor="#ffffff"
tabBarUnderlineStyle={{backgroundColor:'#e7e7e7', height: 2}}
renderTabBar={() => <ScrollableTabBar />}
>
<FavoriteTab tabLabel={'最热'} flag={FLAG_STORAGE.flag_popular} {...this.props}></FavoriteTab>
<FavoriteTab tabLabel={'趋势'} flag={FLAG_STORAGE.flag_trending} {...this.props}></FavoriteTab>
</ScrollableTabView>
</View>
)
}
}
class FavoriteTab extends React.Component {
constructor(props) {
super(props);
this.state = {
isRefresh: false,
dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
favoriteKeys: []
}
this.favoriteDao = new FavoriteDao(this.props.flag);
}
componentDidMount() {
this.getData()
}
componentWillReceiveProps(nextProps) {
console.log(this.props)
this.getData()
}
getData = () => {
this.updataState({ isRefresh: true });
this.favoriteDao.getAllItems().then( items => {
let projectModels = items.map( item => new ProjectModel(item, true) );
this.setState({
isRefresh: false,
dataSource: this.getDataSource(projectModels)
})
}).catch( err => {
this.updataState({
isRefresh: false
})
})
}
getDataSource(data) {
return this.state.dataSource.cloneWithRows(data)
}
updataState(obj) {
if (!this) return;
this.setState(obj)
}
onFavorite(item, isFavorite) {
let key = this.props.flag === FLAG_STORAGE.flag_trending ? item.fullName : item.id.toString();
if (isFavorite) {
this.favoriteDao.saveFavoriteItems(key, JSON.stringify(item))
}else {
this.favoriteDao.removeFavoriteItems(key)
}
}
onRenderRow(projectModel) {
let flag = this.props.flag;
let Component = flag === FLAG_STORAGE.flag_trending ? TrendingItem : ListViewItem;
return <Component
{...this.props}
projectModel={projectModel}
onSelect={ () => this.onSelect(projectModel) }
onFavorite={(item, isFavorite) => this.onFavorite(item, isFavorite)}
/>
}
onSelect(rowData) {
this.props.navigation.navigate('ItemDetails', { rowData, flag:FLAG_STORAGE.flag_popular })
}
render() {
return(
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={ rowData => this.onRenderRow(rowData) }
enableEmptySections={true}
refreshControl={
<RefreshControl
refreshing={this.state.isRefresh}
onRefresh={this.getData}
colors={['#2196F3']}
tintColor={'#2196F3'}
title={'玩命加载中...'}
titleColor={'#2196F3'}
/>
}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
})
1回答
-
慕仔3427096
提问者
2018-08-23
解决了 navigation进入webview的时候传一个回调函数就可以了00
相似问题
回答 1
回答 2