реагирует на навигацию: соединяется с компонентом / экраном без реквизита / состояния - PullRequest
Новая
       55

реагирует на навигацию: соединяется с компонентом / экраном без реквизита / состояния

0 голосов
/ 28 августа 2018

Я ищу способ связать кнопки headerLeft и headerRight реагирующей навигации с экраном / компонентом, на котором он должен отображаться, без использования реквизита / состояния этого компонента.

Мы переместили все наши переходы навигации в один сервис (сначала потому, что он был нужен вне наших реагирующих компонентов, но решили заменить его во всем приложении, чтобы сохранить единый поток).

Теперь, кроме этого сервиса, у нас есть несколько кнопок заголовка, из которых 2 требуют взаимодействия с экраном: отмена / завершение и кнопка редактирования ... В идеале, они должны иметь простой обратный вызов, который может быть предоставлен в Компонент.

Как указано в документации, это один класс, который мы используем в качестве службы: 

import {StackActions, NavigationActions} from 'react-navigation';
import type {NavigationRoute, NavigationParams} from 'react-navigation';

let _navigator;

function setNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName: string, params?: NavigationParams) {
  _navigator.dispatch(NavigationActions.navigate({routeName, params}));
}

function reset(routeName: string, params?: NavigationParams) {
  //...
}

function getCurrentRoute(): NavigationRoute | undefined {
  //...
}

function goBack() {
  _navigator._navigation.goBack();
}

function getCurrentParams() {
  return _navigator.state.params || {};
}

function setParams(params) {
  _navigator._navigation.setParams(params);
}

export default {
  //all functions
};

У нас есть кнопка: 

FinishCancelButton = () => (
  <Button onPress={() => NavigationService.getCurrentParams().canFinish ? NavigationService.setParams({finish: true}) : NavigationService.setParams({cancel: true})}>
    <Text>
      {NavigationService.getCurrentParams().canFinish ? 'finish' : 'cancel'}
    </Text>
  </Button>
),

Раньше объект навигации состояния компонента передавался, что вызывало изменения состояния (canFinish из компонента и завершение / отмена возврата), а с помощью componentWillReceiveProps (что больше не рекомендуется) обновлял экран. Но теперь эта связь исчезла, и мы ищем способ соединить два ...

В идеале это будет простой обратный вызов: 

FinishCancelButton = (onFinish) => (<Button onPress={onFinish} ... />)

Но я не вижу способа сделать это. Другое возможное решение, о котором я подумал, - это присоединить слушатель от компонента к сервису, который уведомляет об изменении определенного свойства.

Есть ли способ создать кнопку в самом компоненте, которая может получить доступ к состоянию?

У кого-нибудь есть идеи? Или если у вас есть еще вопросы или другие подходы, пожалуйста, поделитесь!

...