Навигация из HOC в React Native - PullRequest
Новая
       38

Навигация из HOC в React Native

1 голос
/ 13 июня 2019

Я хочу добавить чек на каждую страницу моего приложения. Проверка заключается в том, что если файл существует, то перетащите пользователя на страницу.

Я думаю, что 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;

Когда я запускаю страницу, я получаю сообщение об ошибке

TypeError: undefined не является объектом (оценивает this.props.navigation.addListener)

Так что я думаю, что навигационная «вещь» не проходит должным образом

Для завершения я использую HOC, вот так 

importFileCheck(App)

и App уже содержат навигационные элементы и работают без HOC.

Импорт

"реагировать": "16.6.1",
«реактивный-нативный»: «0,57,7»,
«реакция-навигация»: «3.2.0»

Дополнительные подробности для увлеченных: 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>
    );
  }
}

и наконец мы завернем с моим новым HOC 

export default importFileCheck(App)

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Нелегко увидеть, в чем заключается ошибка, если вы не предоставили никаких примеров того, как компонент используется в react-navigation.Поскольку проблема связана с тем, что навигационная реквизит не пройден, было бы полезно увидеть более полный пример использования HOC в приложении со всеми подробностями react-navigation.

Тем не менее, возможно,Вы можете попробовать использовать withNavigation HOC, чтобы убедиться в наличии навигационной стойки.Здесь задокументировано: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

0 голосов
/ 13 июня 2019

Ну, это победило меня (и событие навигации, которое я хотел использовать, не срабатывает, когда приложение все равно возвращается из фона)

это мое решение 

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;
  }
}

Тогда в каждомфайлы подкачки return заявление, которое я бью в <ImportFileCheck navigation={navigation} />

Что за хак!

...