React-Native Align Issue

Question

Я просто хочу, чтобы значок находился слева, а текст был в центре.

У меня есть эта структура:

<View style={styles.mainContainer}> 
    <Error screen={screen}/> 
    <View style={styles.headerContainer}> 
     {back && 
      <Icon 
       raised 
       name='arrow-back' 
       onPress={ onBackPress } 
       containerStyle={styles.back}/> 
     } 
     <Text style={styles.header}>{ title }</Text> 
    </View> 
    <View style={styles.contentContainer}> 
     { children } 
    </View> 
    </View> 

Любопытное, как это:

-> MainContainer

-> HeaderContainer

---- кнопка> Назад

----> Название

mainContainer: { 
    flex: 1, 
    flexDirection: 'column', 
    alignItems: 'stretch', 
    justifyContent: 'flex-start' 
    }, 
    headerContainer: { 
    flex: 1, 
    padding: 10, 
    flexDirection: 'row', 
    // ommited for clarity 
    }, 
    back: { 
    alignSelf: 'flex-start' 
    }, 
    header: { 
    fontSize: 24, 
    alignSelf: 'center' 
    }, 

Но он не работает, как она производит:

Я также попытался добавить в HeaderContainer:

justifyContent: 'space-between', 

и пустой <View />, но результат не хорошо:

Как вы можете видеть, это не центр действительно.

Редактировать Производит:

Это на самом деле не в центре, потому что мы ставим воображаемую thrid элемент. Можем ли мы это сделать только с двумя элементами? Один в старте и другой по центру?

Почему это не представляется возможным?

Answer 1

Попробуйте следующее:

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}> 
    <View style={{ flex: 1 }}> 
    {leftContent} 
    </View> 
    <View style={{ flex: 1, alignItems: 'center' }}> 
    {centerContent} 
    </View> 
    <View style={{ flex: 1, alignItems: 'flex-end' }}> 
    {rightContent} 
    </View> 
</View> 

Не забудьте установить textAlign: 'center' если центр компонента <Text> или textAlign: 'right', если правая составляющая Text.

Answer 2

Поместите свой значок и текст в отдельных видах и Asign использование биоэтанола к нему что-то вроде этого

<View style={styles.mainContainer}> 
     <Error screen={screen}/> 
     <View style={styles.headerContainer}> 
      <View style={{flex:.3,alignSelf:'flex-start}}>  
       {back && 
        <Icon 
        raised 
        name='arrow-back' 
        onPress={ onBackPress } 
        containerStyle={styles.back}/> 
       } 
      </View> 
      <View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>  
       <Text style={styles.header}>{ title }</Text> 
      </View>  
    </View> 
    <View style={styles.contentContainer}> 
     { children } 
    </View> 
    </View> 

Я думаю, что это Шоуда исправить эту проблему