Question

如您在docs中所见，react-native-paper中标题的默认位置为左对齐。我已经看到了多个有关如何为Android Native以及React Native的StackNavigator实施居中标题的问题和答案，但是我对使用react-native-paper实现相同的效果没有任何运气。

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

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

Answer 2

您必须使用titleStyle而不是style来使文本居中。以下代码对我有用。

<Appbar.Header>
  <Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>

还有类似的subtitleStyle用于设置字幕样式。 Check the docs for more info。

Answer 3

这应该同时对齐文本/节点标题：

    <Appbar.Content
      title={<Text>title</Text>}
      style={{ alignItems: 'center' }}
    />

请参见https://snack.expo.io/rJUBIR6lU

Answer 4

对此有两种方法。

首先， Appbar.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 5

对于“react-native-paper”，这个片段对我有用：

<Button    
style = {{justifyContent: 'center'}}
>
Press
</Button>

Answer 6

 <Appbar>
    <Appbar.Content titleStyle={{alignSelf: 'center'}} title='something'  />
  </Appbar>

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

6 个答案: