React Navigation 2.0 - Пользовательский компонент заголовка

Question

У меня проблемы с воссозданием моего пользовательского компонента заголовка в React Navigation 2.0.

Стек Нав

У меня есть StackNavigator, который упаковывает BottomTabNavigator, который, в свою очередь, содержит StackNavigator для каждой вкладки. Требование состоит в том, что BottomTabNavigator должен иметь тот же заголовок в корне, если он StackNavigator.

const AppNavigator = createBottomTabNavigator(
  {
    FeedNav: {
      screen: FeedNavigator,
    },
    SubmissionsNav: {
      screen: SubmissionsNavigator,
    },
    ProfileNav: {
      screen: ProfileNavigator,
    },
    DevNav: {
      screen: DevStuffContainer,
    },
  },
);

const AppStackWrapper = createStackNavigator(
  {
    Root: AppNavigator,
  },
  {
    navigationOptions: {
      header: props => {
        return <SOHeader {...props} />;
      },
    },
  }
);

SOHeader

class SOHeader extends React.Component<IHeaderComponentProps> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.logo, { textAlign: 'center' }]}>
          My Custom Header
        </Text>
      </View>
    );
  }
}

// Main logo
const logoWidth = screenDimens.width * 0.35;
const logoHeight = (logoWidth * 50) / 370;
const navHeight = isIphoneX() ? 88 : 64;
const marginTop = Constants.statusBarHeight;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,

    // iOS shadow:
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.4,
    shadowRadius: 8,

    // // Android:
    elevation: 2,
    paddingBottom: Platform.OS === 'ios' ? 0 : 3,

    // THE HACKS
    top: -Constants.statusBarHeight,
    height: navHeight,
    minHeight: navHeight,
    minWidth: screenDimens.width,
  },
  logo: {
    alignSelf: 'center',
    height: logoHeight,
    width: logoWidth,
    // marginLeft: drawerIconSize + 2 * iconHorizontalMargin, // Size of icon + the margin in both sides
    marginTop,
  },
});

export default SOHeader;

Результаты

Итак, чтобы заголовок вообще показывался, мне нужно жестко кодировать minWidth и minHeight компонента, что само по себе кажется странным. Чтобы получить результат, наиболее близкий к желаемому, я также должен добавить top: -Constants.statusBarHeight,

// THE HACKS
top: -Constants.statusBarHeight,
minHeight: navHeight,
minWidth: screenDimens.width,

Это приводит к ситуации, когда между заголовком и содержимым существует небольшой разрыв из-за отрицательного значения top

Если я удаляю значение top, оно вместо этого выглядит следующим образом , где заголовок и строка состояния разделены, а заголовок слишком велик. Установка меньшей высоты заголовка приводит к тому же разрыву, что и для решения 1. Я также пытался добавить headerStyle к navigationOptions, но это не дало эффекта.

Материал, который я пробовал

Я пытался добавить

<StatusBar
  backgroundColor="white"
  barStyle="dark-content"
  translucent={true}
/>

в компоненте заголовка, но это не имело никакого эффекта, несмотря на документы для translucent о том, что приложение теперь должно рисовать под строкой состояния.

Удаление жестко закодированного minHeight приводит к этому , где кажется невозможным оформление react navigation header.

---

Для ясности цель состоит в том, чтобы заголовок выглядел так же, как в первом примере, но без пробела в содержании ниже. В частности, заголовок должен «слиться» со строкой состояния, оба будут белыми.

Любой совет очень приветствуется, спасибо! : -)