В реагирующей навигации есть ли эквивалент this.props.navigation.dispatch () без использования свойства this.props.navigation? - PullRequest
Новая
       53

В реагирующей навигации есть ли эквивалент this.props.navigation.dispatch () без использования свойства this.props.navigation?

0 голосов
/ 21 января 2020

Я вижу, что следующая версия реагирующей навигации будет иметь хук useNavigation(), но есть ли в react-navigation@4.x способ эффективно использовать this.props.navigation.dispatch() без необходимости использования this.props?

Ответы [ 2 ]

0 голосов
/ 22 января 2020

Я сам нашел решение, основанное на изменении рекомендуемого подхода из официальной документации response-navigation 4.x . Подход включает в себя создание компонента навигации «контейнера приложения» из навигатора стека приложения и создание ссылки на этот контейнер. Затем эта ссылка используется объектом-посредником навигационных служб (здесь я называю его NavigationService), который можно импортировать и использовать в любом месте моей кодовой базы. 

// App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';
import HomeScreen from "./HomeScreen";

const TopLevelNavigator = createStackNavigator({
  ...
  Home: {
    screen: HomeScreen,
    defaultNavigationOptions: { gesturesEnabled: isBackGestureEnabled }
  }
  ...
});

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

Необходимые диспетчерские действия определяются следующим образом ( здесь у меня есть методы, созданные для добавления в мой стек навигации и сброса стека навигации). (Это отличается от рекомендации по реактивной навигации; мне пришлось использовать _navigator.currentNavProp.dispatch() вместо _navigator.dispatch(), который для меня не существовал.) 

// NavigationService.js

import { NavigationActions, StackActions } from "react-navigation";

var _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.currentNavProp.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

function navigationReset(routeName) {
  const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName })]
  });
  _navigator.currentNavProp.dispatch(resetAction);
}

export default { navigate, navigationReset, setTopLevelNavigator };

И теперь я могу использовать это в любые другие мои JavaScript файлы, являются ли они компонентами React или нет. 

// anyOtherFile.js

import NavigationService from './NavigationService';

...
NavigationService.navigationReset("Home");
// or
NavigationService.navigate("Home");
...
0 голосов
/ 21 января 2020

Вы можете использовать библиотеку реагировать на навигацию с React Navigation 4. 

import { useNavigation } from 'react-navigation-hooks';

function MyComponent() {
  const navigation = useNavigation();

  // ...
}

Вы также можете использовать withNavigation HO C из основного пакета: https://reactnavigation.org/docs/en/with-navigation.html

...