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.