Реагировать на выравнивание по центру нативного базового заголовка

Я использую React Native Base. Я хочу выровнять заголовок по центру как в iOS, так и в Android, поскольку текст длинный, он скрывает его с помощью «…». Применение flex:3 показывает заголовок полностью, но не выравнивает его по центру. Даже применение alignItems: 'center',alignSelf: 'center' не помогает.

Я пробовал другой вариант, не могу это исправить. Как я могу это исправить?

Код:

 <Header  iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left style={{flex:1}}>
<Button transparent onPress={() =>  this.navigateCustom("goBack")}>
 <Icon name="arrow-back" />
 </Button>
</Left>

    <Body style={{flex:3,}}>
     <Title>THIS IS A LONG TITLE TEST</Title>
   </Body>

  <Right style={{flex:1}}>
  <Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
     <IconEvil  name={"menu"}  style={{ color: "rgb(255,255,255)", fontSize:30}}/>
     </Button>
  </Right>
      </Header>

РЕДАКТИРОВАТЬ: после применения flex:1 и выравнивания по центру тела введите здесь описание изображения


react-native native-base
person devedv    schedule 23.01.2018    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Вы можете использовать justifyContent и alignItems для центрирования, как показано ниже, с flex:1:

 <Body style={{ flex: 1,  justifyContent: 'center', alignItems: 'center' }}>
   <Title>THIS IS A LONG TITLE TEST</Title>
 </Body>
person Lotus91    schedule 23.01.2018
comment
см. выше. Я добавил изображение после применения flex 1 и выравнивания по центру. ‹Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}› ‹Title›ЭТО ТЕСТ НА ДЛИННОЕ НАЗВАНИЕ‹/Title› ‹/Body› - person devedv; 23.01.2018
comment
Привет @devedv, пожалуйста, обратитесь к этому ответу: stackoverflow.com /вопросы/48378993/ - person Seyha; 23.01.2018

arrow_upward
2
arrow_downward 

headerTitleStyle:{
      flex:0.8,
      textAlign: 'center',
      alignSelf: 'center',

}

Теперь вы можете оформить заголовок заголовка с помощью headerTitleStyle, передав его в параметры навигации.

person usman ali    schedule 23.07.2018