如何在React Native的ToolbarAndroid上居中标题？

Question

我正在使用ToolbarAndroid，需要将标题居中显示。但是我无法弄清楚这个操作该如何实现。使用样式属性也没有奏效。

以下是我的代码：

<ToolbarAndroid
    title={toolbarTitle(this.props.activeTab)}
    titleColor='white'
    style={styles.toolbar}
    actions={toolbarActions(this.props.activeTab)}
    onActionSelected={this._onActionSelected.bind(this)}>
</ToolbarAndroid>

工具栏样式：

toolbar: { height: 50, backgroundColor: 'grey' }

我可以根据当前选项卡（使用可滚动选项卡视图）呈现标题属性和其他属性，但是在我的方法中更改标题位置并没有起作用。

- BigPun86

---

请问您能否添加 styles.toolbar 的代码？ - Isaac Madwed

工具栏: { 高度: 50, 背景颜色: '灰色' } - BigPun86

Answer 1

你可以在工具栏中添加自定义视图。

<ToolbarAndroid>
  <View style={styles.title}>
    <Text>Hi there</Text>
  </View>
</ToolbarAndroid>

并将其文本居中

var styles = StyleSheet.create({
  title: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 28
  }
});

需要设置margin才能正确对齐。 有些情况下，需要设置额外的样式属性，比如backgroundColor，以使对齐生效。

- wvengen

---

仍然使用ToolbarAndroid的原因是什么？ - Cesar Alonso

我仍然想使用默认样式（无需在自己的视图中重新创建），而且这些操作也可能很有用。（虽然我已经有一段时间没有使用它了，所以我可能会漏掉一些东西。） - wvengen

Answer 2

根据设计指南，工具栏标题应该对齐到左边。在Java中有一些不正规的方法可以做到这一点，但在React Native中可能是不可能的。 如果您不介意Android设计指南，我建议您使用自定义组件，而不是ToolbarAndroid。

- Michał Kisiel