Question

我在React Native中有一个基于TabBar的应用程序。多个选项卡使用相同的数据源（AsyncStorage）。如果我现在在一个选项卡中更新数据并打开另一个选项卡，则会显示旧数据。我无法弄清楚，每次项目变为活动时如何强制重新加载。

收藏夹查看：显示已保存的数据
ExploreView：处理已保存的数据

FavoritesView：显示过期数据（ - ＆gt;强制重新加载）

<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>

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

<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>

Answer 1

我有一个类似的问题，最终对我有用的是覆盖嵌入式视图上的componentWillReceiveProps。只要在TabBarIOS中将视图设置为selectedTab，就会调用它。

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

Answer 2

使用胖箭头表示法（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this）时，

this引用父组件。

尝试在TabBar项目中添加ref并使用this.refs.refName.forceUpdate()（稍微好于使用随机值更新状态）。

React Native：强制重新加载TabBarIOS.item

2 个答案: