如何在 react-native 中设置背景图像？

React Native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

先决条件：

• ReactJs 的基础知识。
• 具有 ES6 语法的 Html、CSS 和 javascript。
• NodeJs 应该安装在您的系统中（安装）。
• Jdk 和 android studio 用于在模拟器上测试您的应用程序（安装）。

方法：在本文中，我们将看到如何在 react-native 中设置背景图像。在我们的项目中，我们将简单地设置背景图像并在其顶部显示文本输入。

下面是分步实现：

第 1 步：使用以下命令在 react-native 中创建一个项目：

npx react-native init DemoProject

第 2 步：在您的项目中创建一个组件文件夹。在组件内，文件夹创建一个文件 BackgroundImage.js。

项目结构：它将如下所示。

在 BackgroundImage.js 中，我们将从 react-native 导入 ImageBackground 组件。它需要以下道具：

• source：要显示的图像的来源。它可以来自本地存储或 url。
• resizeMode：根据不同的移动配置调整图像大小。

它可以是以下之一：

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

BackgroundImage.js

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 (
    
      
        
      
    
  );
};
  
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,
  },
});

应用程序.js

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

运行应用程序的步骤：使用以下命令运行应用程序：

npx react-native run-android

输出：