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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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?
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:

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
},
});