Javascript 如何使用 ImageBackground 在 react-native 中为屏幕设置背景图像

How to use ImageBackground to set background image for screen in react-native

提问by Waqas

When I use in react-native it gives warning that using with children is deprecated and will be error in future. User instead.

当我在 react-native 中使用时，它会警告不推荐与孩子一起使用，并且将来会出错。用户代替。

So, If I use it doesn't give expected result which I was getting using

所以，如果我使用它不会给出我正在使用的预期结果

Here is the code I wrote for using

这是我为使用而编写的代码

<ImageBackground source={require('../../img/splash/splash_bg.png')} style={styles.backgroundImage} >
        </ImageBackground>

And style code is

样式代码是

const styles = StyleSheet.create({
backgroundImage: {
    flex: 1,
    // width: undefined,
    // height: undefined,
    // flexDirection: 'column',
    // backgroundColor:'transparent',
    // justifyContent: 'flex-start',


},}

回答by Tiago Gouvêa

You can use "ImageBackground"component on React Native.

您可以在 React Native 上使用“ImageBackground”组件。

<ImageBackground
  source={yourSourceFile}
  style={{width: '100%', height: '100%'}}
> 
    <....yourContent...>
</ImageBackground>

回答by BLDD

i achieved this by:

我通过以下方式实现了这一目标：

import { ImageBackground } from 'react-native';

<ImageBackground style={ styles.imgBackground } 
                 resizeMode='cover' 
                 source={require('./Your/Path.png')}>

   //place your now nested component JSX code here

</ImageBackground>

And then the Styles:

然后是样式：

imgBackground: {
        width: '100%',
        height: '100%',
        flex: 1 
},

回答by Alexander Vitanov

Two options:

两种选择：

1. Try setting width and height to width and height of the device screen
2. Good old position absolute

1. 尝试将宽度和高度设置为设备屏幕的宽度和高度
2. 好老位置绝对

Code for #2:

#2 的代码：

 render(){
    return(
        <View style={{ flex: 1 }}>
           <Image style={{ width: screenWidth, height: screenHeight, position: 'absolute', top: 0, left: 0 }}/>
           <Text>Hey look, image background</Text>
        </View>
    )
}

Edit: For option #2 you can experiment with resizeMode="stretch|cover"

编辑：对于选项#2，您可以尝试resizeMode="stretch|cover"

Edit 2: Keep in mind that option #2 renders the image and then everything after that in this order, which means that some pixels are rendered twice, this might have a very small performance impact (usually unnoticeable) but just for your information

编辑 2：请记住，选项 #2 会按此顺序渲染图像，然后按此顺序渲染之后的所有内容，这意味着某些像素会渲染两次，这可能会对性能产生非常小的影响（通常不会引起注意），但仅供参考

回答by chansuke

ImageBackgroundis a very simple and useful component.Put your component inside ImageBackgroundas a nested component and tweak a position of your component by using position.

ImageBackground是一个非常简单且有用的组件。将您的组件ImageBackground作为嵌套组件放入其中，并使用position.

Here's an example.

这是一个例子。

<ImageBackground
  source={{ uri: hoge }}
  style={{
    height: 100,
    width: 100,
    position: 'relative', 
    top: 0,
    left: 0
  }}
>
  <Text
    style={{
      fontWeight: 'bold',
      color: 'white',
      position: 'absolute', 
      bottom: 0, 
      left: 0
    }}
  >
    Hello World
  </Text>
</ImageBackground>

回答by agm1984

Here is a link to the RN docs: https://facebook.github.io/react-native/docs/images

这是 RN 文档的链接：https: //facebook.github.io/react-native/docs/images

A common feature request from developers familiar with the web is background-image. To handle this use case, you can use the <ImageBackground>component, which has the same props as <Image>, and add whatever children to it you would like to layer on top of it.

熟悉 Web 的开发人员提出的一个常见功能请求是 background-image。为了处理这个用例，您可以使用与<ImageBackground>具有相同 props的组件，<Image>并添加任何您想要在其上分层的子项。

You might not want to use <ImageBackground>in some cases, since the implementation is very simple. Refer to <ImageBackground>'s source code for more insight, and create your own custom component when needed.

<ImageBackground>在某些情况下您可能不想使用，因为实现非常简单。<ImageBackground>有关更多信息，请参阅的源代码，并在需要时创建您自己的自定义组件。

return (
  <ImageBackground source={require('./image.png')} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

Note that you must specify some width and height style attributes.

请注意，您必须指定一些宽度和高度样式属性。

Note also that the file path is relative to the directory the component is in.

另请注意，文件路径相对于组件所在的目录。

回答by Muaath Alhaddad

To add background Image, React Native is based on component, the ImageBackgroundComponent requires two props style={{}}and source={require('')}

添加背景图片，React Native 是基于组件的，ImageBackground组件需要两个 props style={{}}和source={require('')}

 <ImageBackground source={require('./wallpaper.jpg')} style={{width: '100%', height: '100%'}}> 
<....yourContent Goes here...>
    </ImageBackground>

回答by Ajith V M

     <ImageBackground
            source={require("../assests/background_image.jpg")}
            style={styles.container}

        >
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <Button
                    onPress={() => this.props.showImagePickerComponent(this.props.navigation)}
                    title="START"
                    color="#841584"
                    accessibilityLabel="Increase Count"
                />
            </View>
        </ImageBackground>

Please use this code for set background image in react native

请使用此代码在 React Native 中设置背景图像

回答by Payel Dutta

const img = '../../img/splash/splash_bg.png';
<ImageBackground  source={{ uri: img }} style={styles.backgroundImage} >
    </ImageBackground>

This worked for me. Reference to RN docs can be found here.I wrote mine by reading this- https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

这对我有用。可以在此处找到对 RN 文档的参考。我通过阅读这篇文章来写我的 - https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting

回答by Ashfaq Hussain

I think this will help u..

我想这会帮助你..

import React, { Component } from 'react';
import { homePageStyles } from '../styles/Style';
import { Text, ImageBackground } from 'react-native';
import HomePageWallpaper from '../images/homePageWallpaper.jpg';

export default class Home extends Component {
    render() {
        return (
            <ImageBackground source={HomePageWallpaper} style={{ flex: 1, justifyContent: 'center', width: null, height: null }}>
                <Container>                    
                    <Content>
                        <Text style={homePageStyles.description_text}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
                    </Content>
                </Container >
            </ImageBackground>
        );
    }
}

回答by lingjin.w

I faced same problem with background image and its child components including logo images. After wasting few hours, I found the correct way to solve this problem. This is surely helped to you.

我在背景图像及其子组件（包括徽标图像）方面遇到了同样的问题。浪费了几个小时后，我找到了解决这个问题的正确方法。这肯定对你有帮助。

var {View, Text, Image, ImageBackground} = require('react-native');
import Images from '@assets';

export default class Welcome extends Component {
    render() {
        return (
            <ImageBackground source={Images.main_bg} style={styles.container}>
                <View style={styles.markWrap}>
                    <Image source={Images.main_logo} 
                    style={styles.mark} resizeMode="contain" />
                </View>
                <View style={[styles.wrapper]}>
                    {//Here put your other components}
                </View>              

            </ImageBackground>
        );
    }
}

var styles = StyleSheet.create({
    container:{
        flex: 1,
    },
    markWrap: {
        flex: 1,
        marginTop: 83,
        borderWidth:1, borderColor: "green"
      },
    mark: {
        width: null,
        height: null,
        flex: 1,
    },
    wrapper:{
        borderWidth:1, borderColor: "green",///for debug
        flex: 1,
        position:"relative",
    },
}

Logo on background Image

背景图片上的标志

(PS: I put on the dummy image on this screen instead of real company logo.)

（PS：我在此屏幕上放置了虚拟图像而不是真实的公司徽标。）