本机基础选项卡不调用生命周期方法 componentWillUnmount

Question

我用的是native-base、redux和react-native，好像切换tab没有调用方法componentWillUnmount，我想做点切换选项卡和删除组件时的操作：

Main.js

export class Main extends Component {
  render() {
    return (
    <Container style={styles.containerStyle}>
        <Tabs initialPage={0}  >
        <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
        </Tabs>
      </Container>
    )
  }
}

Tab1.js

export class Tab1 extends Component {

  constructor(props) {
    super(props);
}

  componentWillMount(){   
    //called 
  }

  componentWillUnmount(){
    //not called when switching tabs
  }


  render() {
    return (
      <Container style={styles.containerStyle}>
        <Content>
          <Text>Tab1</Text>
        </Content>
    </Container>
    );
  }
}

标签页切换和组件移除时如何调用动作？

Answer 1

您可以使用 <Tabs> 标签中的 onChangeTab 属性来监听标签更改事件，如下例所示：

<Tabs 
  renderTabBar={()=> <ScrollableTab />} 
  onChangeTab={(obj) => {
    // obj = {
    //   i: currentPage,
    //   ref: this._children()[currentPage],
    //   from: prevPage,
    // }
    //do something with obj
  }}>
    <Tab heading="Tab1">
      <Tab1 />
    </Tab>
    <Tab heading="Tab2">
      <Tab2 />
    </Tab>
</Tabs>

本机基础选项卡不调用生命周期方法 componentWillUnmount

native-base tabs doesn't call lifecycle method componentWillUnmount

android

reactjs

react-native

native-base