同一行中有其他组件时，如何使组件水平居中？

Question

我正在尝试模仿如下的堆栈导航标题：

标题完美居中，左侧同一行中有一个返回按钮。

我尝试使用右侧justifyContent: 'space-between'的空白View，但标题将偏右一些。我应该如何处理？

我的renderHeader功能：

  _renderHeader = () => {
    return (
      <View style={styles.headerAbsolute}>
        <View style={styles.bar}>
          <ButtonBack
            text={"Resumes"}
            onPress={() => this._onNavBackHandler()}
          />
          {true ? (
            <Text style={styles.headingFixed}>{this.state.title}</Text>
          ) : ( null )}
          <View/>
        </View>
      </View>
    )
  }

这些是样式：

  bar: {
    height: 55,
    flexDirection: "row",
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingBottom: 5,
  },
  headingFixed: {
    fontSize: TITLE_TERTIARY,
    fontWeight: 'bold',
    color: COLOR_DARK_SECONDARY,
    backgroundColor: 'transparent', 
  },

Answer 1

我将在这里使用Flex。请注意，我在下面的示例中使用borderWidth仅作为参考，以显示其外观。

我将把flexDirection作为行，我将给flex: 1里面的所有视图

App.js

import React, { Component } from 'react';
import {
  View,
  Text
}
from 'react-native';

class App extends Component{
  render(){
    return(
      <View>
        <View style={styles.navBar}>
          <View style={styles.itemStyle}>
            <Text style={{fontSize: 18, color: 'blue'}}>Resumes</Text>
          </View>
          <View style={styles.itemStyle}>
            <Text style={{fontSize: 20, color: 'blue'}}>Settings</Text>
          </View>
          <View style={styles.itemStyle}></View>
        </View>

      </View>
    )
  }
}

const styles = {
  navBar: {
    marginTop: 42,
    height: 36,
    flexDirection: 'row',
    alignItems: 'center'
  },
  itemStyle: {
    flex: 1,
    height: 36,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1
  }
}

export default App;

您可以在内部视图中玩耍。将buttonBack移到其中一个子视图中。