2
respostas

Como colocar um texto ou imagem em cima de uma foto?

Coloquei uma foto em todo o fundo da página, agora preciso colocar um texto e uma outra imagem em cima dessa imagem de fundo. Como faço?

2 respostas

Fala Danielle, tudo bem ?

Dá pra fazer algo assim:

export default class Teste extends Component {

    render() {
        return (
            <Image source={require('../../resources/img/background.jpg')} style={styles.backgroundImage}>
                <Text style={styles.titulo}>Título</Text>
                <Image style={styles.fotoDePerfil}
                    source={require('../../resources/img/perfil.jpg')} />
            </Image>

        );
    }
}

const styles = StyleSheet.create({
    backgroundImage: {
        resizeMode: 'cover',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        width: '100%',
        height: '100%',  
    },
    titulo: {
        fontWeight: 'bold',
        fontSize: 26,
    },fotoDePerfil: {
        width: 120,
        height: 120,
        marginTop: 50,
        marginBottom: 20,
        borderRadius: 5,
    },
});

Todo componente visual no React Native em geral é uma View, portanto podemos compor seu conteúdo exibindo outros componentes e brincando com seu estilo.

Nesse exemplo fizemos uma imagem ocupar todo o tamanho do elemento superior (a própria tela) e definimos posição absoluta para ela se destacar em relação a outros elementos em ordem. Dentro dessa imagem todo o layout continua sendo controlado por flex, organizando os elementos com alignItems e justifyContent.

Resultado: teste

Espero ter ajudado. Abraço!

Consegui fazer assim, Rafael

export default class Splash extends Component<{}> {
  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>
            </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,
    marginTop: 50
},
});

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