Как применить независимые HeaderStyleInterpolators в реагирующей навигации?

Question

С помощьюа- -navigation-stack 2.0.15, этот переход не рекомендуется в пользу использования headerStyleInterpolator.forUIKit, но этот переход применяется универсально ко всему заголовку, а не только к заголовку.

Как мне повторить предыдущее поведение на 1.10.X с 2.0.X, где я могу использовать forFade для headerRight и headerLeft?

Пример на 2.0.15:

Пример на 1.10.3:

Основная проблема заключается в удалении анимации замирания при возврате в стек и ее замене на переход слева направо.

Answer 1

forUIKit стили mimi c нативное поведение iOS. Если вам не нужно то же поведение, вы можете использовать вместо этого интерполятор нестандартного стиля.

Если вы хотите оставить тот же интерполятор с forUIKit, но хотите затемнить левую и правую кнопки вместо при переходе по умолчанию вы можете переопределить эти стили следующим образом:

function forCustomHeaderAnimation(options) {
  const { progress } = options.current;
  const styles = HeaderStyleInterpolators.forUIKit(options);

  return {
    ...styles,
    leftButtonStyle: { opacity: progress },
    leftLabelStyle: {},
    rightButtonStyle: { opacity: progress },
  };
}

// ...

static navigationOptions = {
  headerStyleInterpolator: forCustomHeaderAnimation
}

Источник: https://github.com/react-navigation/navigation-ex/blob/2243b45cc1addf83727166d82736d214f181b1fb/packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx