如何在用户进入屏幕或离开屏幕时执行操作

Question

这是我的应用程序容器：

const AppNavigator = createBottomTabNavigator({
    createUser: CreateUser,
    showUsers: ShowUsers,
    editUser: EditUser
});

createUser，我结交新用户并将其保存在数据库中，showUsers componentDidMount生命周期中，我从数据库中获取数据并列出它们。 但是由于屏幕在我们离开屏幕时不会卸载，因此componentDidMount生命周期只是第一次调用，因此每次我获得预览数据时， 我必须重新加载我的应用程序才能看到结果。我该如何解决这个问题？

Answer 1

React 导航有一个生命周期 api，可以完全按照您的描述进行操作：

有关更多信息，请查看文档：https://reactnavigation.org/docs/en/navigation-lifecycle.html

该API的一部分是withNavigationFocus HOC，它提供了一个isFocus道具，用于指示屏幕是否可见。

例：

import { withNavigationFocus } from 'react-navigation';
class SomeScreen extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.isFocused && !prevProps.isFocused) {
      // Screen has now come into focus
    }
  }
}
export default withNavigationFocus(SomeScreen)