8
votes

Comment puis-je centrer le titre dans Appbar.Header dans react-native-paper?

Comme vous pouvez le voir dans la documentation , la valeur par défaut le positionnement du titre dans le papier react-native-paper est aligné à gauche. J'ai vu plusieurs questions et réponses sur la façon d'implémenter un titre centré à la fois pour Android Native et pour StackNavigator de React Native, mais je n'ai pas de chance d'obtenir le même effet avec react-native-paper .

Jusqu'à présent, j'ai essayé d'utiliser le paramètre style dans Appbar.Header pour passer {textAlign: 'center'} ou {flexDirection: 'row', justifyContent: 'space-between'} , mais rien ne semble fonctionner. Je ne suis pas très impressionné par le manque de documentation de react-native-paper sur les remplacements, mais j'espère toujours qu'il y a un moyen de faire ce que je recherche.

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>

Considérant title accepte un node , il peut être utilisé pour afficher un composant de réaction.

Comment puis-je forcer le centrage du titre sur tous les appareils?

javascript reactjs material-design react-native css

4 commentaires

Essayez d'utiliser le style plutôt que les styles

Devrait fonctionner avec flex-grow: 1; text-align: center; . Si vous pouvez fournir un exemple en cours, je peux fournir une méthode pour le centrer.

Ajout d'un exemple. J'ai essayé d'utiliser flexGrow et textAlign et toujours pas de chance: - /

Mise à jour du statut: j'ai découvert que les applications Android alignées à gauche de manière native, et que les applications iOS s'alignent au centre de manière native, et que React-Native suit ces conventions par défaut. Je suis satisfait du comportement par défaut et je n'ai plus besoin de réponse aux questions, mais je suis toujours curieux de la possibilité d'une solution car la documentation de React-Native Paper laisse actuellement beaucoup à désirer.

3 Réponses :

2
votes

Vous devez utiliser titleStyle au lieu de style pour centrer le texte. Le code ci-dessous fonctionne pour moi.

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

Il existe également un subtitleStyle similaire pour styliser le sous-titre. Consultez la documentation pour plus d'informations .

1 commentaires

Ça ne marche pas. Du moins pas pour tous. Il est inutile sur iOS (par défaut et non modifiable (ex: pas de valeur droite ou gauche)) , cela fonctionne sur le web , et il n'affiche pas du tout le titre sur Android sauf s'il s'agit de texte . Il ne peut fonctionner sur Android que si le texte mais les accessoires title sont censés accepter plus que du texte (un node ). Comment puis-je faire la même chose avec un composant Svg (qui est un nœud) en tant que titre ? Cela le fait disparaître sur Android, alors n'utilisez pas titleStyle = {{textAlign: 'center'}}

0
votes

Cela devrait aligner le texte / le titre du nœud:

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

Voir https: //snack.expo.io/rJUBIR6lU

6 commentaires

Cela ne fonctionne pas non plus sur Android si nous utilisons un svg comme composant de réaction. J'ai un logo svg dont j'ai besoin pour centrer sur tous les appareils. Nous ne pouvons pas utiliser de texte.

Cela ne me semble pas centré: snack.expo.io/@kopax/bold- tortillas

Pouvez-vous montrer une capture d'écran montrant ce que vous voyez et pourquoi ce n'est pas centré?

Web: user-images.githubusercontent.com/ 1866564 /…

Android: user-images.githubusercontent.com/ 1866564 /…

iOS: user-images.githubusercontent.com/ 1866564 /…

3
votes

react-navigation permet de passer un composant pour title au lieu d'une chaîne, donc nous pouvons faire la même chose ici:

J'ai écrit un exemple qui accepte un composant de titre personnalisé et peut être utilisé où nous voulons:

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;

Vous pouvez vérifier: https://snack.expo.io/r1VyfH1WL

0 commentaires