如何在屏幕更改时对类组件做出反应原生 5x 时聚焦？答案

【问题标题】：How to focus when screen change in react native 5x for class components?如何在屏幕更改时对类组件做出反应原生 5x 时聚焦？
【发布时间】：2021-03-15 11:31:25
【问题描述】：

我正在使用带有类组件结构的 React Navigation 5x！但是，当查看“聚焦屏幕更改时调用函数”的反应导航文档时，没有“类组件”的数据仅适用于“功能性”。虽然 4x 有我想要的东西，但 5x 什么都没有。我想做的是下面；考虑有两个屏幕作为选项卡导航器。 A 和 B。A 有一个 API 查询，必须进行此获取并更新屏幕。首先打开一切顺利，并带来数据和渲染屏幕。但是按B再按A后，屏幕没有更新！我该如何解决这个问题，为“类组件”反应原生 5x


async componentDidMount() {

  

  const datam = {
    page: this.state.page
};
//Burada kullanıcı yoksa ülkeleri getireceğiz
const rest = await fetch('https://www.birdpx.com/mobile/fotografgetir/' + this.state.page, {
    method: 'POST',
    headers: { 'Accept': 'application/json', 'Content-type': 'application/json' },
    body: JSON.stringify(datam)
});

const gelenVeri = await rest.text();
let convertedVeri = JSON.parse(gelenVeri);



this.setState({
    data: convertedVeri,

})


}

每次访问该页面时，此 fetch 方法都必须有效

【问题讨论】：

标签： react-native nested focus react-navigation tabnavigator

【解决方案1】：

您可以使用“焦点”事件来调用您的 API 方法。每次屏幕聚焦时都会执行此操作

  ...
  
  componentDidMount() {
    this.unsubscribe = navigation.addListener('focus', () => {
        //do your api call
    });
  }

  componentWillUnmount(){
    if(this.unsubscribe)
      this.unsubscribe();
  }
  
  ...

【讨论】：