Establecer el ancho de la imagen en porcentaje en React Native

Este artículo mostrará cómo podemos establecer el ancho en formato de porcentaje en una aplicación React-Native. Además, discutiremos el tema utilizando los ejemplos y explicaciones necesarios para facilitar el tema.

Establecer el ancho de la imagen en porcentaje en React Native

No todos los dispositivos contienen el mismo tamaño. En un diseño responsivo, es necesario que un elemento cambie su tamaño en función del tamaño de la pantalla del dispositivo.

La solución a este problema es definir el tamaño del elemento en formato de porcentaje. De esta forma, el tamaño del elemento cambiará automáticamente en función del tamaño de la pantalla del dispositivo.

Nuestro ejemplo a continuación demuestra cómo podemos proporcionar el valor de ancho en un formato de porcentaje. El fragmento de código para nuestro ejemplo será el siguiente.

// importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://www.delftstack.com/assets/img/logo.png',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );
}
/ / Providing style to the app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: '100%',
    height: 200,
    resizeMode: 'contain',
  },
});

Ya ordenamos el propósito de todas las líneas necesarias con respecto a los pasos compartidos anteriormente en el ejemplo.

<Image style={styles.img} source={{ uri: 'https://www.delftstack.com/assets/img/logo.png', }} />

Después de incluir la imagen de la línea de código anterior, establecemos las siguientes propiedades en la hoja de estilo.

Para los contenedores:

Para la imagen:

Cuando ejecute el código de ejemplo anterior, obtendrá el siguiente resultado.

Producción:

Tenga en cuenta que el código compartido anteriormente se crea en React-Native, y usamos Expo-CLI para ejecutar la aplicación. Además, necesita la última versión de Node.js.

Si no tiene Expo-CLI en su entorno, instálelo primero.