Centre horizontal de positionnement absolu React Native

93

Il semble qu'avec l' position:absoluteutilisation d'un élément ne puisse pas être centré à l'aide de justifyContentou alignItems. Il existe une solution de contournement à utiliser, marginLeftmais qui n'affiche pas la même chose pour tous les appareils, même en utilisant les dimensions pour détecter la hauteur et la largeur de l'appareil.

  bottom: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    top: height*0.93,
    marginLeft: width*0.18,
  },
  bottomNav: {
    flexDirection: 'row',
  },

— Hasen
source

Votre élément a-t-il une largeur statique ou dynamique?

— Ivan Chernykh

252

Enveloppez l'enfant que vous souhaitez centrer dans une vue et rendez la vue absolue.

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

— Stephen Horvath
source

28

Très utile. Il y a un raccourci agréable pour les styles params qui pendent de l' StyleSheetobjet: ...StyleSheet.absoluteFillObject. voir github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

Cela ne fait-il pas Viewoccuper TOUT l'espace cliquable à l'écran? Par exemple, si j'avais un composant sous celui-ci absolument positionné View, je ne pourrais pas enregistrer de clics dessus.

— James111

10

@ James111 Il semble que vous pouvez ajouter pointerEvents='box-none'pour passer les touches à travers la vue: github.com/facebook/react-native/issues/12360

— Stephen Horvath

Cette méthode récupère l'image entière si le texte a une couleur d'arrière-plan: /

— DevMultiTech

@codewise oui, il y a une nouvelle façon de le faire, consultez ma réponse

— David Noreña

73

Si vous souhaitez centrer un élément lui-même, vous pouvez utiliser alignSelf :

logoImg: {
    position: 'absolute',
    alignSelf: 'center',
    bottom: '-5%'
}

Ceci est un exemple (notez que le logo parent est une vue avec position: relative )

— David Noreña
source

1

alignSelf n'a pas fonctionné pour moi (il n'a rien fait, en fait). Pourriez-vous ajouter un peu plus de contexte au code?

— johnny kehr

1

Vous devez afficher le parent: 'flex' @ wilc0

— Travis Delly

12

Vous pouvez centrer des éléments absolus en fournissant à la propriété de gauche la largeur de l'appareil divisée par deux et en soustrayant la moitié de la largeur de l'élément que vous souhaitez centrer.

Par exemple, votre style pourrait ressembler à ceci.

bottom: {
    position: 'absolute',
    left: (Dimensions.get('window').width / 2) - 25,
    top: height*0.93,
}

— Corey
source

cela ne fonctionne que si vous connaissez la largeur des éléments au préalable

— Adamski

1

Si vous ne savez pas que l'élément n'a pas de largeur connue, vous pouvez utiliser onLayout pour obtenir la largeur des éléments

measure(layout) {      const { width } = layout;      this.setState({ width: width }) } ... <View     onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

— Corey

6

créer une pleine largeur Viewavec alignItems: "center"puis insérer les enfants souhaités à l'intérieur.

import React from "react";
import {View} from "react-native";

export default class AbsoluteComponent extends React.Component {
  render(){
    return(
     <View style={{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
      {this.props.children}
     </View>    
    )
  }
}

vous pouvez ajouter des propriétés comme bottom: 30pour le composant aligné en bas.

— Masbossun
source

2

<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
  <Text>CENTERD TEXT</Text>
</View>

Et ajoutez ceci

import {StyleSheet} from 'react-native';

— Mahdi Bashirpour
source

Les réponses courtes et uniquement codées sont souvent mal vues sur Stack Overflow. Afin d'éviter d'être signalé comme «de mauvaise qualité», pensez à ajouter un texte explicatif.

— Adrian Mole

1

Vous pouvez essayer le code

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>

— Eris Mabu
source

Haha. Cela fonctionne pour moi, cependant, nous devons ajouter `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}`

— babie

1

C'est vraiment très simple. Utilisez le pourcentage pour widthet les leftpropriétés. Par exemple:

logo : {
  position: 'absolute',
  top : 50,
  left: '30%',
  zIndex: 1,
  width: '40%',
  height: 150,
}

Quoi qu'il en widthsoit, leftégal(100% - width)/2

— user11360198
source