position - float - react native text wrap

Reaccionar centro horizontal de posicionamiento absoluto nativo

Question

Parece que con position:absolute en uso, un elemento no puede centrarse usando justifyContent o alignItems . Hay una solución alternativa para usar marginLeft pero no se muestra igual para todos los dispositivos, incluso utilizando 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'',
  },

Answer 1

Envuelva el elemento secundario que desee centrado 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>

Answer 2

Es muy simple en realidad. Use porcentaje para width y propiedades de left . Por ejemplo:

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

Sea cual sea el width , la left es igual (100% - width)/2

Answer 3

Puede centrar elementos absolutos proporcionando la propiedad izquierda con 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 más o menos así.

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

Answer 4

Puedes probar el código

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

Answer 5

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 )

Answer 6

cree una View ancho completo con alignItems: "center" luego inserte los hijos deseados dentro.

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: 30 para el componente alineado con el fondo.