React Native 在打开时刷新组件

Question

我的堆栈导航器为 -

export const Routes = StackNavigator({
    Login: {
        screen: Login,
    },
    Flights: {
        screen: Flights,   
    },
    Payment: {
        screen: Payment,
    }
}, {
        initialRouteName: 'Login'
    }
)

流程为登录->航班->支付。

航班屏幕会调用 API 来获取航班。我有逻辑让航班停靠componentDidMount()。但是，当我从“付款”返回“航班”时，我想再次进行 API 调用。

我的问题是，如何在每次打开“航班”屏幕时执行此 API 调用逻辑？

Answer 1

除了获取数据之外componentDidMount，您还可以为事件创建一个侦听didFocus器。

例子

class Flights extends React.Component {
  state = { flights: [] };

  componentDidMount() {
    this.getFlights();

    this.listener = this.props.navigation.addListener("didFocus", this.getFlights);
  }

  componentWillUnmount() {
    this.listener.remove();
  }

  getFlights = () => {
    getData().then(flights => {
      this.setState({ flights });
    });
  };

  render() {
    // ...
  }
}