Imagen central en React Native

En React-Native, es muy fácil implementar imágenes en una aplicación. Después de implementar, debemos proporcionar la alineación perfecta a nuestra imagen para que se vea mejor.

En este artículo, veremos cómo podemos centrar un elemento de imagen de una aplicación React-Native. Veremos un ejemplo y una explicación para facilitar el tema.

Imagen central en React Native

A veces necesitamos centralizar el elemento de imagen para varios propósitos. Por ejemplo, si está diseñando un precargador para una aplicación, debe proporcionar una imagen de precargador en la ventana del precargador, que debe estar alineada en el centro.

En nuestro ejemplo a continuación, ilustraremos cómo podemos colocar un elemento de imagen en el centro de una aplicación React-Native. 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: 200,
    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 en la línea de código anterior, establecemos las siguientes propiedades en la hoja de estilo.

Para los contenedores:

Para la imagen:

Obtendrá el siguiente resultado en su pantalla cuando ejecute la aplicación.

Producción:

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

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