对齐左侧的后退按钮和中间的文字

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', 
}, 

...有点缺憾，但它已经为我工作。或者，您可以瓜分头与基于Flex的意见，使用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> 

祝你好运！