React Native posicionamento centro horizontal absoluto

96

Parece que position:absoluteem uso um elemento não pode ser centralizado usando justifyContentou alignItems. Há uma solução alternativa a ser usada, marginLeftmas não exibe a mesma para todos os dispositivos, mesmo usando dimensões para detectar a altura e a largura do dispositivo.

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

— Hasen
fonte

Seu elemento tem largura estática ou dinâmica?

— Ivan Chernykh

260

Envolva a criança que deseja centralizar em uma Visualização e torne a Visualização absoluta.

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

— Stephen Horvath
fonte

29

Muito útil. Há um atalho agradável para os parâmetros de estilo que penduram fora do StyleSheetobjeto: ...StyleSheet.absoluteFillObject. consulte github.com/facebook/react-native/blob/master/Libraries/…

— wkw

2

Isso não faz com que Viewocupe TODO o espaço clicável na tela? Por exemplo, se eu tivesse um componente embaixo dele posicionado de forma absoluta View, não seria capaz de registrar cliques nele.

— James111

10

@ James111 Parece que você pode adicionar pointerEvents='box-none'para passar os toques pela visualização: github.com/facebook/react-native/issues/12360

— Stephen Horvath

Este método recupera a imagem inteira se o texto tiver uma cor de fundo: /

— DevMultiTech

@ Da mesma forma, há uma nova maneira de fazer isso, verifique minha resposta

— David Noreña

78

Se você quiser centralizar um elemento, pode usar o alignSelf :

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

Este é um exemplo (observe que o pai do logotipo é uma visualização com posição: relativa )

— David Noreña
fonte

1

alignSelf não funcionou para mim (na verdade, não fez nada). Você poderia adicionar um pouco mais de contexto ao código?

— johnny kehr

1

Você precisa que o pai seja exibido: 'flex' @ wilc0

— Travis Delly

11

Você pode centralizar itens absolutos fornecendo à propriedade à esquerda a largura do dispositivo dividida por dois e subtraindo a metade do elemento que deseja centralizar a largura.

Por exemplo, seu estilo pode ser parecido com isto.

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

— Corey
fonte

1

isso só funciona se você souber a largura dos elementos de antemão

— Adamski

1

Se você não sabe que o elemento não tem uma largura conhecida, você pode usar onLayout para obter a largura dos elementos

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

— Corey

7

crie uma largura total Viewcom, em alignItems: "center"seguida, insira os filhos desejados 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>    
    )
  }
}

você pode adicionar propriedades como bottom: 30componente alinhado inferior.

— Masbossun
fonte

Isso tem que ser aceito como a resposta correta, funciona para praticamente todas as situações.

— abril

2

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

E adicione isso

import {StyleSheet} from 'react-native';

— Mahdi Bashirpour
fonte

Respostas curtas, apenas de código, são frequentemente desaprovadas no Stack Overflow. Para evitar ser sinalizado como 'baixa qualidade', considere adicionar algum texto explicativo.

— Adrian Mole

1

Você pode tentar o código

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

— Eris Mabu
fonte

Haha. Isso está funcionando para mim, no entanto, precisamos adicionar `style = {{alignItems: 'center', justifyContent: 'center', flexDirection: 'row'}}`

— babie

1

É muito simples. Use porcentagem para propriedades widthe left. Por exemplo:

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

Seja o que widthfor, é leftigual(100% - width)/2

— user11360198
fonte