1
resposta

MarginRight modifica todo o container

Preciso de um text 'Cadastre' totalmente à esquerda e um text 'Sobre' totalmente à direita, mas ao colocar marginRight: 100, por exemplo, todo o meu container é modificado. Como faço para colocar os texts nesses lugares?

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableOpacity
} from 'react-native';

import {
    Container
} from 'native-base';

import Images from '../imgs';


export default class Splash extends Component {

    constructor(props) {
        super(props);
    }

  render() {
    return (
        <View style={styles.container}>
            <Image 
                key = {Images.background}
                source = {Images.background}
                style = {styles.backgroundStyle}
                resizeMode = 'stretch'
            />

            <Container style={styles.transparentView}>
                <View style={styles.logoViewStyle}>
                    <Image 
                        key = {Images.logo}
                        source = {Images.logo}
                        resizeMode = 'contain'
                        style = {styles.logoStyle}
                    />
                </View>
                <View >
                    <Text style={styles.acessar}>Acessar com</Text>
                </View>

                <View style = {styles.viewSocialStyle}>
                    <TouchableOpacity>
                        {/* Ícone do Facebook */}
                        <Image 
                            key = {Images.facebookbranco}
                            source = {Images.facebookbranco}
                            resizeMode = 'contain'
                            style = {styles.iconStyle}
                        />
                    </TouchableOpacity>
                </View>

                <View style={styles.viewRodape}>
                    <Text style={styles.rodape}>Cadastre</Text>
                    <Text style={styles.rodape}>Sobre</Text>
                </View>
            </Container>

        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  backgroundStyle: {
    flex: 1,
    position: 'relative'
  },

  transparentView: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    position: 'absolute'
},

logoViewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 250
},

logoStyle: {
    height: 100,
    width: 100,

},

acessar: {
    color: '#fff',
    marginTop: 40,
    fontSize: 16,
},

iconStyle: {
    width: 50,
    height: 50,
    marginBottom: 10
},

viewSocialStyle: {
    width: 250,
    height: 100,
    justifyContent: 'flex-end',
    alignItems: 'center'
},

rodape: {
    color: '#fff',
    fontSize: 20,
    marginTop: 100,
},

viewRodape: {
    flexDirection: 'row',
    marginTop: 100,
},

});
1 resposta

Fala Danielle, tudo bem ?

Tentar definir margens com tamanhos fixos realmente pode acarretar muita quebra de layout. Lembre-se que o React Native traz uma implementação própria de flex-box que por sua vez tem suporte para esse tipo de posicionamento de forma muito simples.

Se o container dos textos (que por padrão tem display flex) tiver o seguinte estilo:

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
}

Ele vai alinhar horizontalmente os elementos fazendo com que todo espaço que sobra (descontando o tamanho dos elementos) seja colocado entre eles (space-between). Colocando assim um texto totalmente à esquerda e o outro totalmente à direita.

Dê uma pesquisada nesse guia de referência sobre a especificação flexbox => https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Espero ter ajudado. Abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software