React Native: принудительная перезагрузка TabBarIOS.item

Question

У меня есть приложение на основе TabBar в React Native. Несколько вкладок используют один и тот же источник данных (AsyncStorage). Если я сейчас обновляю данные на одной вкладке и открываю другую, отображаются старые данные. Я не могу понять, как заставить перезагружать каждый раз, когда элемент становится активным.

1. FavoritesView: дисплей Сохраненные данные
2. ExploreView: Манипулирование Сохраненные данные

3. FavoritesView: истекло данные получает отображается (-> сила перезарядка)

   <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

this ссылается на родительский компонент при использовании жира стрелки обозначения (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this).

Попробуйте добавить ref в элемент TabBar и использовать this.refs.refName.forceUpdate() (немного лучше, чем обновить состояние со случайным значением).

Answer 2

У меня была аналогичная проблема, и в конечном итоге мне пришлось переопределить componentWillReceiveProps во встроенных представлениях. Он вызывается в любое время, когда представление установлено как selectedTab в TabBarIOS.

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