Adding a background image is as easy as adding an image to react-native applications.

添加背景图像就像将图像添加到本机应用程序一样容易。

As usual, we always begin by importing the necessary components which in this case will include ImageBackground.

和往常一样，我们总是从导入必要的组件开始，在这种情况下，这些组件将包括ImageBackground。

You should take note of the name of the component. It is not the one you usually see in CSS.

您应该记下组件的名称。 它不是您通常在CSS中看到的那种。

To add an Image Background, we must import the component as usual.
The ImageBackground component has taken several properties similar to that of the Image component like the source property which is the source of the image and other properties like the style and more which can be seen on the official documentation of react-native.

要添加图像背景 ，我们必须照常导入组件。
ImageBackground组件具有与Image组件类似的多个属性，例如source属性(它是图像的来源)和其他属性(例如样式)，更多内容可以在react-native的官方文档中看到。

https://facebook.github.io/react-native/docs/image

https://facebook.github.io/react-native/docs/image

Just like with the Image component, the background image can take a local image and the image from a URL.

就像使用Image组件一样 ， 背景图像可以获取本地图像，也可以获取URL中的图像。

The example below gets an image from a URI and displays it as the background.

下面的示例从URI获取图像并将其显示为背景。

Open your App.js file and type the following,

打开您的App.js文件，然后输入以下内容：

import * as React from 'react';
import { Text, View, StyleSheet, Button, ImageBackground } from 'react-native';

export default function App () {
  return (
  <ImageBackground source={{uri:'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTdncnwIlxMYCGXAGLqXWpyQzlLySodA1-_YEl9EH0kdVqoLPlt'}}
 style={{width: '100%', height: '100%'}}
 resizeMode={"contain"}
 >

  <Text style={{color: 'gold'}}> I LOVE YOU </Text>
  </ImageBackground>

);

}

Output

输出量

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感谢您与我编码！ 下次见。 随意发表评论或问题。 上帝祝福你！

翻译自: https://www.includehelp.com/react-js/how-to-add-react-native-app-background-image.aspx