react-native - 从另一个屏幕导航时 didFocus 不起作用

Question

我在我的 React Native Expo 应用程序中使用“react-navigation 3.11.0”，我的导航结构如下。

const orderStackNavigator = createStackNavigator(
  {
    orders: {
      screen: Orders
    },
    orderdetail: {
      screen: OrderDetail
    },
    ordermoredetails: {
      screen: OrderMoreDetails
    },
    ordernotes: {
      screen: OrderNotes
    },
    orderbillingdetails: {
      screen: OrderBillingDetails
    },
    orderdeliverydetails: {
      screen: OrderDeliveryDetails
    }
  },
  {
    //headerMode: 'none'
    defaultNavigationOptions: {
      headerStyle: [styles.headerStyle]
    }
  }
);

const inventoryManagerStackNavigator = createStackNavigator(
  {
    categories: {
      screen: Categories
    },
    products: {
      screen: Products
    },
    editProduct: {
      screen: EditProduct
    }
  },
  {
    //headerMode: 'none'
    defaultNavigationOptions: {
      headerStyle: [styles.headerStyle]
    }
  }
);

const tabNavigator = createBottomTabNavigator(
  {
    orders: {
      screen: orderStackNavigator,

    },
    inventory: {
      screen: inventoryManagerStackNavigator,
    },
  },
  {
    order: ["orders","inventory"],
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: "#026AC2",
      inactiveTintColor: "#86AAC2",
      labelStyle: { fontFamily: "ClearSans-Regular" }
      //iconStyle: { fontFamily: 'ClearSans-Bold' }
    }

  }
);

const mainStackNavigator = createStackNavigator(
  {
    login: {
      screen: Login
    },
    oAuth: {
      screen: OAuth
    },
    tabs: {
      screen: tabNavigator
    }
  },
  {
    initialRouteName: "login",
    headerMode: "none"
  }
);

const AppContainer = createAppContainer(mainStackNavigator);
export default AppContainer;

我面临的问题是，如果我从 ordermoredetails 导航到 editProduct，它不会将 didFocus 监听器添加到导航中。如果我曾经导航到库存然后编辑产品它会按预期工作，即使从 ordermoredetails 但如果用户转到 ordermoredetails 并导航到 editProduct 它不起作用。下面是我用于添加监听器的 editProduct 代码。

componentDidMount() {

      const { navigation } = this.props;
      this.focusListener = navigation.addListener("didFocus", () => {
        if (this.props.needToReload == true) {
          //do the stuff
        }
      });
  }

componentWillUnmount() {
    // Remove the event listener
    if (this.focusListener != null && this.focusListener.remove)
      this.focusListener.remove();
  }

任何人都可以告诉我如何解决这个问题并在每次组件加载时调用 didFocus 吗？

Answer 1

在 navigation.addListener 中将“didFocus”更改为“focus”对我有用。