反应本机 Flexbox 中心忽略上一个项目

Question

我正在为我的应用程序创建自定义 "Navigation bar"，我需要以下布局：

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

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

现在是这样:

Current layout

在检查器中它看起来如何

View inspector

如你所见，文字在他的中心space，但我想在整个组件的中心。

这是现在的代码：

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

Answer 1

您可以通过将其设置为三个视图来处理此问题。把你的按钮放在左边，文字放在中间，然后把右边的留空。然后对左边和右边做 "flex: 0.25"，然后对中心放置 "flex: 0.5"。您当然可以增加或减少两侧，只需确保中心是到达 1.0

的任何剩余部分

反应本机 Flexbox 中心忽略上一个项目

React native Flexbox center ignoring previous item

flexbox

react-native