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',
  },
position react-native flexbox absolute Hasen
fuente
¿Tu elemento tiene ancho estático o dinámico?
Ivan Chernykh

Respuestas:

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 )

ingrese la descripción de la imagen aquí

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