React native 左对齐后退按钮，中间对齐文本

我想把字符串“示例”放在标题的中间。

代码：

图像按钮样式：

alignSelf: 'center',

---

一种方法是在另一侧使用相同大小的空.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>

…有点笨拙，但对我来说很有效。或者，您可以使用基于flex的视图分割标题，使用：

//按钮在这里
//这里有文字
//这里什么都没有

---

祝你好运

扩展kwishnu的flex理念：

• flex:1将始终仅为标题分配宽度的1/3。所以使用
  flex:1自动允许标题扩展到所有可用空间

• 添加<代码>最小宽度：适合内容返回到后退按钮（这样标题将永远不会覆盖后退按钮）
• 在标题非常非常长的情况下添加额外样式

span{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

后退按钮
编辑标题以查看标题很长时的行为

Modified flex适合我，谢谢你的创意！

alignSelf: 'center',

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

<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>