Centro horizontal de posicionamiento absoluto nativo de React

93

Parece que con el position:absoluteuso un elemento no se puede centrar usando justifyContento alignItems. Existe una solución alternativa, marginLeftpero no muestra lo mismo para todos los dispositivos, incluso si se utilizan dimensiones para detectar la altura y el ancho del dispositivo.

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

— Hasen
fuente

¿Tu elemento tiene ancho estático o dinámico?

— Ivan Chernykh

252

Envuelva al niño que desea centrar en una Vista y haga que la Vista sea absoluta.

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

— Stephen Horvath
fuente

28

Muy útil. Hay un atajo agradable para los parametros de estilo colgando fuera del StyleSheetobjeto: ...StyleSheet.absoluteFillObject. ver github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

¿No hace esto que Viewocupe TODO el espacio en el que se puede hacer clic en la pantalla? Por ejemplo, si tuviera un componente debajo de este absolutamente posicionado View, no podría registrar clics en él.

— James111

10

@ James111 Parece que puede agregar pointerEvents='box-none'para pasar los toques a través de la vista: github.com/facebook/react-native/issues/12360

— Stephen Horvath

Este método recupera la imagen completa si el texto tiene un color de fondo: /

— DevMultiTech

@codewise sí, hay una nueva forma de hacerlo, mira mi respuesta

— David Noreña

73

Si desea centrar un elemento en sí mismo, puede usar alignSelf :

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

Este es un ejemplo (tenga en cuenta que el logotipo principal es una vista con posición: relativa )

— David Noreña
fuente

1

alignSelf no funcionó para mí (de hecho, no hizo nada). ¿Podría agregar un poco más de contexto al código?

— johnny kehr

1

Necesita que el padre se muestre: 'flex' @ wilc0

— Travis Delly

12

Puede centrar elementos absolutos proporcionando a la propiedad de la izquierda el ancho del dispositivo dividido por dos y restando la mitad del elemento que desea centrar el ancho.

Por ejemplo, su estilo podría verse así.

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

— Corey
fuente

esto solo funciona si conoce el ancho de los elementos de antemano

— Adamski

1

Si no sabe que el elemento no tiene un ancho conocido, puede usar onLayout para obtener el ancho de los elementos

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

— Corey

6

crear un ancho completo Viewcon alignItems: "center"hijos, entonces inserto deseada en el interior.

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>    
    )
  }
}

puede agregar propiedades como bottom: 30para el componente alineado en la parte inferior.

— masbossun
fuente

2

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

Y agrega esto

import {StyleSheet} from 'react-native';

— Mahdi Bashirpour
fuente

Las respuestas breves y de solo código a menudo están mal vistas en Stack Overflow. Para evitar ser marcado como "de baja calidad", considere agregar algún texto explicativo.

— Adrian Mole

1

Puedes probar el código

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

— Eris Mabu
fuente

Jaja. Esto funciona para mí, sin embargo, necesitamos agregar `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}`

— babie

1

Realmente es muy simple. Utilice porcentaje para widthy leftpropiedades. Por ejemplo:

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

Lo widthque sea es leftigual(100% - width)/2

— usuario11360198
fuente