如何在 react-native-paper 中将 Appbar.Header 中的标题居中？

Question

正如您在docs 中看到的那样，react-native-paper 中标题的默认位置是左对齐的。我已经看到多个关于如何为 Android Native 和 React Native 的 StackNavigator 实现居中标题的问题和答案，但我没有运气用react-native-paper.

到目前为止，我已经尝试使用style参数 inAppbar.Header传入{ textAlign: 'center' }or { flexDirection: 'row', justifyContent: 'space-between' }，但似乎没有任何效果。我对 react-native-paper 缺乏关于覆盖的文档印象不深，但我仍然希望有一种方法可以做我正在寻找的东西。

const styles = { header: { textAlign: 'center' }}

<Appbar.Header style={styles.header}>
  <Appbar.Action icon="close" onPress={() => this.close()} />
  <Appbar.Content title={title} />
  <Button mode="text" onPress={() => this.submit()}>
    DONE
  </Button>
</Appbar.Header>

考虑到titleaccept a node，它可以用来显示一个反应组件。

如何在所有设备上强制将标题居中？

Answer 1

有两种方法可以实现此目的。

首先， TheAppbar.Content已marginLeft应用于它。所以，你只需要将其设置marginLeft为0即可。

<Appbar.Header>
  <Appbar.BackAction />
  <Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
  // Put empty action here or any action you would like to have
  <Appbar.Action/>
</Appbar.Header>

遗憾的是，这种方法只允许右侧的一个菜单操作。（或者左右都有相同数量的操作，但我认为只有一个菜单操作位于左侧，即后退按钮）

二是要有Appbar.Content定位absolute。是的，将 保留marginLeft为 0。

<Appbar.Content title='Title' 
  style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }} 
  titleStyle={{ alignSelf: 'center' }} />

我们需要将 zIndex 设置为 -1（或更低），以便按钮/菜单操作可单击。这样，您就可以拥有多个菜单操作。

第一种方法简单但有局限性，而第二种方法功能强大但需要编写更多代码。

Answer 2

react-navigation允许传递一个 fortitle而不是字符串的组件，所以我们可以在这里做同样的事情：

我写了一个接受自定义标题组件的示例，可以在我们想要的任何地方使用：

import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';

const ContentTitle = ({ title, style }) => (
  <Appbar.Content
    title={<Text style={style}> {title} </Text>}
    style={{ alignItems: 'center' }}
  />
);

const App = () => (
  <Appbar.Header> 
    <Appbar.Action icon="close" onPress={() => this.close()} />
    <ContentTitle title={'Title'} style={{color:'white'}} />
    <Button mode="text" onPress={() => this.submit()}>
      DONE
    </Button>
  </Appbar.Header>
);

export default App;

您可以查看：https : //snack.expo.io/r1VyfH1WL