反应原生 Flexbox 中心忽略前一项答案

【问题标题】：React native Flexbox center ignoring previous item反应原生 Flexbox 中心忽略前一项
【发布时间】：2015-12-28 06:08:13
【问题描述】：

我正在为我的应用创建自定义“导航栏”，我需要以下布局：

| ================================== |
| ICON  TWO LINES TEXT              |    
|       TWO LINES TEXT              |
| ================================== |

<Text>这两个字段应该在状态栏的中心和右边的图标

这就是现在的样子：

Current layout

在检查器中它的外观

View inspector

如你所见，文本位于他空间的中心，但我想位于整个组件的中心。

这就是现在的代码：

const styles = {
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#64619b',
    height: 64,
    paddingTop: 10,
  },
  title: {
    color: 'white',
    fontSize: 17,
  },
  belowTitle: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  backButton: {
    width: 32,
    height: 32,
    alignSelf: 'center',
    marginLeft: 16,
  },
  textContainer: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
};

class NavigatorHeader extends React.Component {
  render() {
    return <View style={[styles.container, this.props.style]}>
      <TouchableOpacity onPress={this.onBackPress.bind(this)}>
        <Icon name="ion|ios-arrow-back" size={32} color="white" style={styles.backButton} />
      </TouchableOpacity>
      <View style={styles.textContainer}>
        <Text style={styles.title}>{this.props.title}</Text>
        {this.props.belowTitle && <Text style={styles.belowTitle}>{this.props.belowTitle}</Text>}
      </View>
    </View>;
  }
}

【问题讨论】：

标签： flexbox react-native

【解决方案1】：

您可以通过将其设置为三个视图来处理此问题。把你的按钮放在左边，文字放在中间，然后把右边的留空。然后为左右做“flex：0.25”，然后为中心输入“flex：0.5”。你当然可以增加或减少两侧，只要确保中心是剩下的 1.0

【讨论】：

使用三个视图就有了我想要的效果。谢谢！