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)

当在本地反应器中在抽屉导航器上单击选项卡时，组件呈现一次

1 个答案: