反应原生导航钩子避免无限递归

Question

我有

  useEffect(() => {
    const cancelButtonOnPress = () => {
      navigation.dismiss();
      //
    };
    setParamsRef.current({ cancelButtonOnPress });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [setParamsRef]);

注意 linting 的注释以避免详尽的 deps

如果我去掉注释并将导航添加到钩子数组，那么它就会循环......

如何避免循环？

Ref 用于导航选项上按钮的 onPress，位于功能组件之外

PBpNewScreen.navigationOptions = ({
  navigation: {
    state: {
      params: { cancelButtonOnPress: cancelOnPress },
    },
  },
}: any) => ({
  headerRight: () => {
    return (
      <TouchableOpacity onPress={cancelOnPress}>
        <Text style={styles.cancel}>Cancel</Text>
      </TouchableOpacity>
    );
  },
  headerTitle: () => {
    return <HeaderBarTitle section="PANTS" title="Add New Biller" />;
  },
  headerStyle: {
    backgroundColor: naColors.GreyScale2,
  },
  headerTransparent: true,
});

提前致谢