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

Question

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

到目前为止，我已经尝试使用 Appbar.Header 中的 style 参数来传递 { textAlign: 'center' } 或 { 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>

考虑到 title 接受一个 node，它可以用来显示一个 React 组件。

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

Answer 1

react-navigation 允许为 title 传递组件而不是字符串，因此我们可以在这里做同样的事情:

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

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