react-native - 将左侧的后退按钮和中间的文本对齐

Question

我想把字符串 'example' 放在标题的中间。

代码:

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

View 样式:

    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' 将标题与基于 flex 的 View 分开:

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

祝你好运!