Question

我正在创建一个自定义＆＃34;导航栏＆＃34;对于我的应用程序，我需要以下布局：

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

Answer 1

你可以通过制作三个视图来处理这个问题。将按钮放在左侧，将文本放在中间，然后将右侧的按钮留空。然后左右执行“flex：0.25”，然后将“flex：0.5”放入中心。你当然可以增加或减少双方，只需确保中心是剩下的任何东西，以达到1.0

反映原生Flexbox中心忽略以前的项目

1 个答案: