0

Como andan? Soy nuevo con esto de react native, empece a probar crear una app y ya me surgio el siguiente problema, tengo una app que en la pagina de home tengo un titulo y un subtitulo y abajo una imagen, la cual lo estoy centrando tanto verical como horizontalmente, pero la imagen no queda verticalmente, quedando en el borde inferior de la pantalla del dispostivo

El codigo que tengo es el siguiente:

import { Image, StyleSheet, Text, View } from 'react-native';

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import homeCalendar from './assets/img/home-calendar.png';

export default function App() {
  return (
    <View style={styles.container}>
         <HomeScreen/>
         <StatusBar style="auto" />
          <Image style={styles.home} source = {require('./assets/img/home-calendar.png')}/>
    </View>
  );
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Titulo</Text>
        <Text style={styles.subtitle}>Subtitulo</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    fontStyle: 'italic',
  },
  home: {

  },

  
});

Podrian estuve leyendo, y probe propiedades pero ninguna me centra en el eje de las y la imagen.

Espero sus comentarios, Muchas gracias

0

1 respuesta 1

1

Quedo, le estaba errando donde agregue la imagen, no la agrege al conteiner sino directo al view por eso no tomaba los styles:

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Booking assistant</Text>
        <Text style={styles.subtitle}>Don't lose time, reserve your place now!</Text>
        <Image style= {styles.home} source = {require('./assets/img/home-calendar.png')}/>
      </View>
    );
  }
}

y lo saque de:

export default function App() {
  return (
    <View style={styles.container}>
         <HomeScreen/>
         <StatusBar style="auto" />
    </View>
  );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.