Как передать реквизиты компонента в функцию static-navigation реагирования-навигации

Question

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

Я нашел способ сделать это и подумал, что выложу это здесь.

Answer 1

Во-первых, вспомогательный метод. Цель этого - просто убедиться, что мы не входим в бесконечный цикл, когда мы передаем реквизиты в navigation.params внутри componentDidUpdate, - и инкапсулируем небольшой кусочек логики, участвующей в фактическом отображении реквизита. Это использует JSON.stringify для сравнения реквизита. В зависимости от того, что вы делаете, вам может понадобиться заменить этот бит более сложным сравнением.

export function mapPropsToNavigationRouteParams(
  props,
  prevProps,
  getPropsToMap,
) {
  if (!props) return;
  const propsToMap = getPropsToMap(props);

  if (
    !prevProps ||
    JSON.stringify(getPropsToMap(prevProps)) !== JSON.stringify(propsToMap)
  ) {
    props.navigation.setParams(getPropsToMap(props));
  }
}

Затем, в компоненте с указанным выше способом мы можем сделать что-то вроде этого ...

const getPropsToMapToNavigation = props => ({
  myComponentProp: props.myComponentProp,
});

class MyComponent extends React.Component {
  componentDidMount() {
    mapPropsToNavigationRouteParams(
      this.props,
      null,
      getPropsToMapToNavigation,
    );
  }

  componentDidUpdate(prevProps) {
    mapPropsToNavigationRouteParams(
      this.props,
      prevProps,
      getPropsToMapToNavigation,
    );
  }

  static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;
    const myComponentProp = params ? params.myComponentProp : null;
    // ...
  }

Учитывая ограничения реакции-маршрутизатора, это лучшее, что я мог придумать. Если у вас есть лучшее решение, дайте мне знать!