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