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

我可以渲染标题属性和其他属性，具体取决于我使用哪个Tab（使用可滚动标签视图），但是更改我的标题所在的位置不适用于我的方法

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

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

Answer 2

根据设计指南，工具栏标题与左侧对齐。在java中有一些hacky方法可以做到这一点，但在本机反应中可能是不可能的。如果您不介意Android设计指南，我建议您使用自定义组件而不是ToolbarAndroid。

我如何将标题放在React Natives ToolbarAndroid上？

2 个答案: