¿Cómo configurar la imagen de fondo en react-native?

React Native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

requisitos previos:

• Conocimientos básicos de ReactJs .
• Html, CSS y javascript con sintaxis ES6.
• NodeJs debe estar instalado en su sistema ( install ).
• Jdk y Android Studio para probar su aplicación en el emulador ( instalar ).

Enfoque: en este artículo, veremos cómo configurar la imagen de fondo en react-native. En nuestro proyecto, simplemente estableceremos una imagen de fondo y mostraremos una entrada de texto encima.

A continuación se muestra la implementación paso a paso:

Paso 1: Cree un proyecto en react-native usando el siguiente comando:

npx react-native init DemoProject

Paso 2: Cree una carpeta de componentes dentro de su proyecto. Dentro de los componentes, la carpeta crea un archivo BackgroundImage.js.

Estructura del proyecto: Tendrá el siguiente aspecto.

En BackgroundImage.js, importaremos el componente ImageBackground desde react-native. Se necesitan los siguientes accesorios:

• source: Fuente de la imagen a mostrar. Puede ser de almacenamiento local o url.
• resizeMode: cambio de tamaño de la imagen en función de diferentes configuraciones móviles.

Puede ser uno de los siguientes:

resizeMode: "center" | "contain" | "cover" | "repeat" | "stretch"

import React from 'react';
import { Text, View, TextInput, ImageBackground, 
    StyleSheet, Dimensions } from 'react-native';
  
const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;
  
const BackgroundImg = () => {
  return (
    <View>
      <ImageBackground
        source={{
          uri: 
'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png',
        }}
        resizeMode="stretch"
        style={styles.img}>
        <TextInput placeholder="Geeks for Geeks" style={styles.input} />
      </ImageBackground>
    </View>
  );
};
  
export default BackgroundImg;
  
const styles = StyleSheet.create({
  img: {
    height: screenHeight,
    width: screenWidth,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 2,
    padding: 10,
  },
});

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import BackgroundImg from './components/BackgroundImage';
  
const App: () => Node = () => {
  return (
    <View>
      <BackgroundImg />
    </View>
  );
};
  
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npx react-native run-android

Producción: