Реагировать на собственный StackNavigation, Невозможно центрировать заголовок

Question

Я пытался центрировать текст в заголовке StackNavigation, но ничто из того, что я использовал, не сдвинуло заголовок.Я не уверен, что просто использую неправильный CSS для решения этой проблемы.

class CryptoInfo extends React.Component {
static navigationOptions = ({ navigation, navigationOptions }) => {
  const { params } = navigation.state;

  return {
    title: params ? params.otherParam : 'Cryptopedia',
    /* These values are used instead of the shared configuration! */
    headerStyle: {
      backgroundColor: navigationOptions.headerStyle.backgroundColor,
      textAlign: 'center',
  alignSelf: 'center',
    },
    headerTintColor: navigationOptions.headerTintColor,
  };
};

render() {
  /* 2. Read the params from the navigation state */
  const { params } = this.props.navigation.state;
  const itemId = params ? params.itemId : null;
  const otherParam = params ? params.otherParam : null;

  return (
    <View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'flex-start', backgroundColor: '#68BFAC' }}>
      <ETHCard/>

    </View>

  );
}

}

Я изначально не использовал textAlign или alignSelf, но мне не повезлос чем.Я читал, что headerStyleTitle - еще один метод, но с этим тоже не повезло.Спасибо за помощь!

PS - я пытался использовать headerText, а также ниже:

return {
    title: params ? params.otherParam : 'Cryptopedia',
    /* These values are used instead of the shared configuration! */
    headerTitleStyle: {
      backgroundColor: navigationOptions.headerStyle.backgroundColor,
    },
    headerTintColor: navigationOptions.headerTintColor,
    headerText: {
      textAlign: 'center',
      alignSelf: 'center',
    },
  };
};

По-прежнему безрезультатно: (

Answer 1

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

const HeaderComponent = () => {
  return (
    // Your heade 
  );
}

static navigationOptions = ({ navigation, navigationOptions }) => {
  const { params } = navigation.state;

  return {
    header: <HeaderComponent />
  }
};