React Native:强制重新加载TabBarIOS.item [英] React Native: Force reload of TabBarIOS.item

问题描述

我在React Native中有一个基于TabBar的应用程序. 多个选项卡使用相同的数据源(AsyncStorage). 如果我现在在一个选项卡中更新数据并打开另一个选项卡，则会显示旧数据. 我不知道如何在每次激活该项目时强制重新加载.

I have a TabBar based app in React Native. Multiple tabs use the same datasource (AsyncStorage). If I'm now updating the data in one tab and open the other one, the old data is displayed. I can't figure out, how to force a reload every time the item become active.

1. 收藏夹视图:显示保存的数据
2. ExploreView:处理已保存的数据

3. 收藏夹视图:显示过期数据(->强制重新加载)

1. FavoritesView: display saved data
2. ExploreView: Manipulate saved data

3. FavoritesView: expired data gets displayed (--> force reload)

<TabBarIOS.Item
title="Explore"
icon={{uri:'ic_explore'}}
  selected={this.state.selectedTab === 'exploreTab'}
  onPress={() => {
    this.setState({
      selectedTab: 'exploreTab'
    });
  }}>
  <ExploreView/>
</TabBarIOS.Item>

<TabBarIOS.Item
  title="Favorites"
  icon={{uri:'ic_favorite_border'}}
  selected={this.state.selectedTab === 'favoriteTab'}
  onPress={() => {
    this.setState({
      selectedTab: 'favoriteTab'
    });
  }}>
   // Reload this
  <FavoritesView/>
</TabBarIOS.Item>

<TabBarIOS.Item
  systemIcon="more"
  selected={this.state.selectedTab === 'moreTab'}
  onPress={() => {
    this.setState({
      selectedTab: 'moreTab'
    });
  }}>
  <MoreView/>
</TabBarIOS.Item>

我已经试图设置一个新状态来触发更新，但是它似乎并没有改变任何东西.

I already tried to set a new state to trigger an update, but it doesn't seem to change anything.

<TabBarIOS.Item
      title="Favorites"
      icon={{uri:'ic_favorite_border'}}
      selected={this.state.selectedTab === 'favoriteTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'favoriteTab',
          forceUpdate: Math.random()
        });
      }}>
      <FavoritesView forceUpdate={this.state.forceUpdate}/>
</TabBarIOS.Item>

推荐答案

我遇到了类似的问题，最终对我有用的是重写嵌入式视图上的componentWillReceiveProps.只要在TabBarIOS中将视图设置为selectedTab，就会调用它.

I had a similar issue and what eventually worked for me was to override componentWillReceiveProps on the embedded views. It gets called anytime the view is set as selectedTab in the TabBarIOS.

https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

这篇关于React Native:强制重新加载TabBarIOS.item的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！