组件在 React native 中单击抽屉导航器上的选项卡时呈现一次

Question

我是反应本机的新手，在调用组件时遇到问题。每当单击抽屉导航器选项卡时，第一次组件呈现和API调用但是当返回主页并再次调用该组件API时未调用。我想回顾一下这个功能。

这是我的抽屉导航器代码：

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="home" size={20} color="#0f1f7b" />
        )
    },
  },
  PreviousInspection: {
    screen: PreviousInspection,
    navigationOptions: {
      drawerLabel: 'Previous Inspection',
      drawerIcon: () => (
        <Icon name="file" size={20} color="#0f1f7b" />
        )
    },
  },
  Logout: {
    screen: Logout,
    navigationOptions: {
        drawerLabel: 'Logout',
        drawerIcon: () => (
          <Icon name="sign-out" size={20} color="#0f1f7b" />
          )
    },
  }
},
{
  drawerBackgroundColor: "#fff",
  contentOptions: {
    activeTintColor: '#000',
    inactiveTintColor: '#000',
    activeBackgroundColor: '#bfc7f3',
    itemStyle: {
      fontSize: 12,
    },
  },
});

Answer 1

react-navigation 有一个 withNavigationFocus HOC，它为您的组件提供了一个 isFocused 道具。您可以使用它来确定某个屏幕何时可见。

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