Reactjs 在React Native中从HOC中导航

我希望在我的应用程序的每个页面上都添加一个检查。检查是否存在文件，然后将用户拉到页面

我认为HOC是实现这一点的一种方法（还有其他方法吗？）

我想到了这个

import React from "react";
import { NavigationScreenProp } from "react-navigation";
import RNFS from "react-native-fs";

interface MyComponentProps {
  navigation: NavigationScreenProp<any, any>;
}

interface MyComponentState {}

const importFileCheck = WrappedComponent => {
  class HOC extends React.Component<MyComponentProps, MyComponentState> {
    constructor(props) {
      super(props);

      this.props.navigation.addListener("didFocus", () => {
        RNFS.exists(
         ".\path\I\care\about.xml"
        ).then(exists => {
          if (exists) {
            this.props.navigation.navigate("Export");               
          }
        });
      });
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  return HOC;
};

export default importFileCheck;

而且

App

中已经有导航功能，并且可以在没有HOC的情况下工作

进口是

“反应”：“16.6.1”，
“反应本机”：“0.57.7”，
“反应导航”：“3.2.0”

有关keen:D的更多详细信息

首先，我制作了一个堆栈导航器，它是我应用程序中所有页面的导航器

const appNav = createStackNavigator(
    {
        Calculator: {
            screen: Calculator,
            navigationOptions: { title: "Calculator" }
        },
   // more pages
);

export default createAppContainer(appNav);

在

App.tsx

这在其他组件中得到“包装”

const WrappedStack = () => {
  return <RootStack screenProps={{ t: i18n.getFixedT() }} />;
};

const ReloadAppOnLanguageChange = translate("translation", {
  bindI18n: "languageChanged",
  bindStore: false
})(WrappedStack);

 class App extends React.Component {
  public render() {
    return (
      <I18nextProvider i18n={i18n}>
        <StyleProvider style={getTheme(material)}>
          <Provider
            ManureStore={ManureStore}
            SettingsStore={SettingsStore}
            FieldStore={FieldStore}
            CalculatorStore={CalculatorStore}
            FarmStore={FarmStore}
          >
            <ReloadAppOnLanguageChange />
          </Provider>
        </StyleProvider>
      </I18nextProvider>
    );
  }
}

---

如果您没有提供在

react导航中如何使用组件的任何示例，则不容易看出错误是什么。由于该问题与未通过导航道具有关，因此查看应用程序中如何使用HOC的更完整示例以及所有
react导航
详细信息会有所帮助

也就是说，您可以尝试使用
with navigation
HOC来确保导航道具存在。这里有记录：
这让我大吃一惊（我想使用的导航事件在应用程序从后台返回时不会触发）

这是我的解决方案

import React, { Component } from "react";
import { NavigationScreenProp } from "react-navigation";
import RNFS from "react-native-fs";
import { AppState } from "react-native";

interface Props {
  navigation: NavigationScreenProp<any, any>;
}

interface State {}

export default class ImportFileCheck extends Component<Props, State> {
  private _handleAppStateChange = nextAppState => {
    if (nextAppState === "active") {
      RNFS.exists(
        RNFS.DocumentDirectoryPath + "/Inbox/Import.json"
      ).then(exists => {
        if (exists) {
          this.props.navigation.navigate("Export");
        }
      });
    }
  };

  constructor(props) {
    super(props);
    AppState.addEventListener("change", this._handleAppStateChange);
  }

  public componentWillUnmount() {
    AppState.removeEventListener("change", this._handleAppStateChange);
  }
  public render() {
    return null;
  }
}

import React，{Component}来自“React”；
从“反应导航”导入{NavigationScreenProp}；
从“react native fs”导入RNFS；
从“react native”导入{AppState}；
界面道具{
导航：导航屏幕弹出；
}
界面状态{}
导出默认类ImportFileCheck扩展组件{
private\u handleAppStateChange=nextapstate=>{
如果（nextapstate==“活动”）{
存在(
RNFS.DocumentDirectoryPath+“/Inbox/Import.json”
)。然后（存在=>{
如果（存在）{
this.props.navigation.navigate（“导出”）；
}
});
}
};
建造师（道具）{
超级（道具）；
AppState.addEventListener（“更改”，this.\u handleAppStateChange）；
}
公共组件将卸载（）{
AppState.removeEventListener（“更改”，this.\u handleAppStateChange）；
}
公共渲染（）{
返回null；
}
}

然后在每个页面文件
return
语句中，我插入一个

真讨厌
 我们可以在5.x.x或更高版本中使用
useNavigation
的
react navigation
挂钩

import { useNavigation } from '@react-navigation/native';

然后使用
useNavigation
初始化
导航
，如

const navigation = useNavigation();

然后使用
导航
执行不同的导航操作，如

navigation.navigate('ToScreen');
naviagtion.goBack();

希望这能帮助别人。
谢谢，我会看一下。。。另外，我还添加了一堆代码来尝试给出上下文，或者你可以在这里看到整个该死的部分（没有hoc，因为它还没有提交……由于这个问题：D）（在src dir中查看）我修改了我的hoc，就像这样
returnwithnavigation（hoc）和我得到的错误
不变冲突：withNavigation只能用于导航器的视图层次结构。包装组件无法从道具或上下文访问导航
，这表明我没有以正确的方式传递导航
。
const navigation = useNavigation();

navigation.navigate('ToScreen');
naviagtion.goBack();