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

Question

我想把字符串＆＃39;示例＆＃39;在标题的中间。

代码：

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

...有点kludgy，但它对我有用。或者，您可以使用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>

祝你好运！

Answer 2

扩展 kwishnu 的 flex 想法：

• flex: 1; 将始终只为标题分配宽度的 1/3。因此，请改用 flex: 1 1 auto; 以允许标题扩展到所有可用空间。
• 将 min-width: fit-content; 添加到后退按钮（这样标题永远不会覆盖后退按钮）。
• 在标题真的很长的情况下添加额外的样式

span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="header" style="display: flex;">
    <span style="flex: 1; background: aqua; min-width: fit-content;">Back Button</span>
    <span style="flex: 1 1 auto; text-align: center; background: beige;">Edit title to see behaviour whien title is very long</span>
    <span style="flex: 1; background:red;"></span>
</div>