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的时候传一个回调函数就可以了
0
0

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程