Question

我在我的react native expo应用程序中使用“ react-navigation 3.11.0”，并且具有以下导航结构。

@Transaction(Propagation = required_new )

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

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;

任何人都可以让我知道如何解决此问题，并在每次加载组件时让didFocus调用吗？

Answer 1

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

Answer 2

“ didFocus ”不适用于我。请尝试“ 重点”。以下是与我一起工作的示例代码。我的版本为：“ @ react-navigation / native”：“ ^ 5.7.6 ”，

   componentDidMount() {
        this.focusListener = this.props.navigation.addListener('focus', () => {
          // your logic will go here
        });
      }
      componentWillUnmount() {
        // Remove the event listener
        this.focusListener.remove();
      }

从另一个屏幕导航时didFocus无法正常工作

2 个答案: