react-native - 我如何在 React Natives ToolbarAndroid 上居中标题？

Question

我正在使用 ToolbarAndroid，我需要将工具栏标题居中。我无法弄清楚这是如何工作的。使用 Styles 属性，它不起作用。

这是我的代码:

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

我可以根据我所在的选项卡(使用可滚动选项卡 View )呈现标题属性和其他属性，但更改标题放置的位置对我的方法不起作用

Answer 1

您可以在工具栏内添加自定义 View

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

并将其文本居中

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

需要一个边距才能正确对齐。在某些情况下，我发现有必要设置一个额外的样式属性，如 backgroundColor 以使对齐工作。