左に戻るボタンと中央のテキストを合わせる

Question

文字列の中央に文字列 'example'を入れたいと思っています。

コード：

<View style={viewStyle}> 
     <ImageButton 
     imageUrl={require('./assets/icons/Back-25.png')} 
     onPress={props.onPressPhone} 
     /> 
     <Text>{props.headerText}</Text> 
    </View> 

ViewStyleプロパティ：

backgroundColor: 'white', 
    alignItems: 'center', 
    height: 60, 
    paddingTop: 15, 
    shadowColor: '#000000', 
    shadowOffset: { width: 0, height: 1 }, 
    shadowOpacity: 0.2, 
    elevation: 2, 
    position: 'relative', 
    flexDirection: 'row', 
    justifyContent: 'space-between', 

画像ボタンのスタイル：これを行うには

alignSelf: 'center', 

Answer 1

一つの方法は、同じサイズを使用することです空.png私反対側の魔術師、およびスペースの間にあなたのヘッダーのスタイルで：

<View style={ styles.header }> 
    <Button style={{left: 10}} onPress={() => this.handlePress() }> 
     <Image source={ require('../images/arrow_back.png') } style={{ width: 50, height: 50 }} /> 
    </Button> 
    <Text style={styles.header_text} >{this.props.title}</Text> 
    <Button style={{right: 10}}> 
     <Image source={ require('../images/no_image.png') } style={{ width: 50, height: 50 }} /> 
    </Button> 
</View> 

と

header: { 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent: 'space-between', 
    width: width, 
    backgroundColor: '#09146d', 
}, 

...ビット場しのぎが、それは私のために働いています。また、あなたはflexDirection: 'row'を使用して、フレックスベースのビューでヘッダーを分けることができます：

View style={ styles.header }> 
    <View style={{flex: 1}}> 
     //Button in here 
    </View> 
    <View style={{alignItems: 'center', flex: 6}}> 
     //Text in here 
    </View> 
    <View style={{flex: 1}}> 
     //Nothing in here 
    </View> 
</View> 

幸運を！