Как реализовать функциональность OnAppear в пользовательском компоненте внутри компонента «Основные вкладки» - PullRequest
Новая
       10

Как реализовать функциональность OnAppear в пользовательском компоненте внутри компонента «Основные вкладки»

1 голос
/ 31 октября 2019

У меня есть собственная базовая панель вкладок, где я показываю разные страницы для каждой вкладки. 

 <Tabs>
   <Tab
     heading="FirstTab"
     activeTabStyle={styles.activeTabStyle}
     activeTextStyle={styles.activeTextStyle}
   >
     <MyCustomeComponent/>
   </Tab>
   <Tab
     heading="SecondTab"
     activeTabStyle={styles.activeTabStyle}
     activeTextStyle={styles.activeTextStyle}
   >
     <MyOtherCustomeComponent/>
   </Tab>

Теперь я хочу запустить функцию в MyCustomeComponent и MyOtherCustomeComponent всякий раз, когда вкладка corresponginвыбран. Что-то вроде функциональности OnAppear.

Я знаю, что есть свойство onChangeTab от компонента Tabs, но я не знаю, как попасть туда в свой пользовательский компонент.

1 Ответ

1 голос
/ 31 октября 2019

попробуйте реагировать-родной-вкладка-вид. Вот ссылка

Надеюсь, что это поможет вам.

Обновление:

Вы должны добавить "ref" в свои вкладки и затем использовать"this.refs". Ваш код будет выглядеть так: 

checkTabPosition(e){
    // determine which tab to refresh
    var tabToRefresh = ...;

    // refresh tab
    refreshTab(tabToRefresh);
}

refreshTab( tab ){
  this.refs[tab].fetchData();
}

Затем вызовите его из "onChangeTab" 

<Tabs onChangeTab={(e)=>{this.checkTabPosition(e)}}>
    <Tab
         ref="tab1"
         heading="FirstTab"
         activeTabStyle={styles.activeTabStyle}
         activeTextStyle={styles.activeTextStyle}
    >
</Tabs>
...