Agrega recursos de imágenes en la aplicación para la pantalla de login

En este video vamos a ver cómo agregar una imagen de fondo para la pantalla de inicio de sesión. Esta imagen será un recurso de la aplicación y veremos que para mostrarla es un poco distinto a como se hace con una imagen obtenida con un enlace como la que obtuvimos para el avatar del usuario anónimo.

Usaremos dos imágenes que puedes encontrar en la pestaña de archivos de este video: la imagen background.jpg y logo.png que es el logo del curso.

Para eso en el componente de LoginView vamos a agregar las Images con sus source adecuados. El método render quedará así:

render() {
    return (
      <Image source={require('./background.jpg')} style={styles.container}>
        <Text style={styles.welcome}>Bienvenidos a PlatziMusic</Text>
        <Image source={require('./logo.png')} style={styles.logo} />
        <LoginButton
          readPermissions={['public_profile', 'email']}
          onLoginFinished={ this.handleLoginFinished }
          onLogoutFinished={() => alert("logout.")}/>
      </Image>
    );
  }

Y los estilos de nuestro componente LoginView deben verse así:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null,
    backgroundColor: 'lightgray',
    justifyContent: 'center',
    alignItems: 'center'
  },
  welcome: {
    fontSize: 24,
    fontWeight: '600',
    marginBottom: 20,
    backgroundColor: 'transparent',
    color: 'white',
  },
  logo: {
    width: 150,
    height: 150,
    marginBottom: 15
  }
});

En el siguiente video veremos cómo agregar los íconos de nuestra app que se ven en Android y en iOS.