在React Native中添加全屏背景图像的最佳方法是什么？

Question

我想在View中添加一个全屏图像,所以我编写了这段代码

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}>
    </View>
)

并将样式定义为

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

但是这样我怎么能找到实际的iPhone屏幕尺寸？

我见过一个API来访问像素密度,但没有关于屏幕尺寸......

任何的想法？

Answer 1

(现已弃用,现在可以使用ImageBackground)

这就是我做到的.主要协议是摆脱静态固定尺寸.

class ReactStrap extends React.Component {
  render() {
    return (
      <Image source={require('image!background')} style={styles.container}>
        ... Your Content ...
      </Image>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  }
};

Answer 2

您可以flex: 1在<Image>元素上使用样式使其填满整个屏幕.然后,您可以使用图像调整大小模式之一使图像完全填充元素:

<Image source={require('image!egg')} style={styles.backgroundImage} />

样式:

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

我很确定你可以摆脱<View>包装你的形象,这将有效.

Answer 3

注意:此解决方案已过时.请参考 https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting代替

试试这个解决方案 它得到官方支持.我刚刚测试过它并且完美无缺.

var styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    alignSelf: 'stretch',
    width: null,
  }
});

至于将它用作背景图像,只需执行以下操作即可.

<Image style={styles.backgroundImage}>
  <View>
    <Text>All your stuff</Text>
  </View>
</Image>

Answer 4

我使用react-native version = 0.19.0尝试了几个这样的答案无法用于android.

出于某种原因,我的样式表中的resizeMode不能正常工作？然而,当sytlesheet有

backgroundImage: {
flex: 1,
width: null,
height: null,
}

并且,在Image标签中我指定了resizeMode:

<Image source={require('path/to/image.png')} style= {styles.backgroundImage} resizeMode={Image.resizeMode.sretch}>

它工作得很好!如上所述,您可以使用Image.resizeMode.cover或包含.

希望这可以帮助!

Answer 5

根据Braden Rockwell Napier的回答,我制作了这个BackgroundImage组件

BackgroundImage.js

import React, { Component } from 'react'
import { Image } from 'react-native'

class BackgroundImage extends Component {
  render() {
    const {source, children, style, ...props} = this.props
    return (
      <Image source={ source }
             style={ { flex: 1, width: null, height: null, ...style } }
             {...props}>
        { children }
      </Image>
    )
  }
}
BackgroundImage.propTypes = {
  source: React.PropTypes.object,
  children: React.PropTypes.object,
  style: React.PropTypes.object
}
export default BackgroundImage

someWhereInMyApp.js

 import BackgroundImage from './backgroundImage'
 ....
 <BackgroundImage source={ { uri: "https://facebook.github.io/react-native/img/header_logo.png" } }>
    <Text>Test</Text>
 </BackgroundImage>

Answer 6

2018年3月更新使用Image不建议使用ImageBackground

  <ImageBackground 
          source={{uri: 'https://images.pexels.com/photos/89432/pexels-photo-89432.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb'}}
          style={{ flex: 1,
            width: null,
            height: null,
            }}
        >
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Your Contents</Text>
       </View>

 </ImageBackground >

Answer 7

如果要将其用作背景图像,则需要使用2017年6月底在v0.46中引入的新<ImageBackground>组件.它支持嵌套,但很快就不会.<Image>

这是提交摘要:

我们正在删除组件内嵌套视图的支持.我们决定这样做,因为具有这种特征使得配套 intrinsinc content size的的<Image>不可能的; 因此,当转换过程完成时,不需要明确指定图像大小,可以从实际图像位图推断出.

这是第0步.

是非常简单的直接替换,通过非常简单的样式实现此功能.请使用,而不是如果你想把东西放进去.

Answer 8

哦,上帝终于找到了React-Native V 0.52-RC和原生基地的好方法:

您的内容标记应该是这样的:// ======================================= =======================

<Content contentContainerStyle={styles.container}>
    <ImageBackground
        source={require('./../assets/img/back.jpg')}
        style={styles.backgroundImage}>
        <Text>
            Some text here ...
        </Text>
    </ImageBackground>
</Content>

而你的基本风格是:// ========================================== ====================

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
backgroundImage:{
    flex : 1,
    width : '100%'
}

它很好的朋友......玩得开心

Answer 9

更新到ImageBackground

由于<Image />作为容器使用已暂时弃用,所有答案实际上都会遗漏一些重要内容.为了正确使用选择<ImageBackground />与style 和 imageStyle支撑.应用所有图像相关样式imageStyle.

例如:

<ImageBackground
    source={yourImage}
    style={{
      backgroundColor: '#fc0',
      width: '100%', // applied to Image
      height: '100%' 
    }}
    imageStyle={{
      resizeMode: 'contain' // works only here!
    }}
>
    <Text>Some Content</Text>
</ImageBackground>

https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js

Answer 10

import { ImageBackground } from "react-native";
<ImageBackground
     style={{width: '100%', height: '100%'}}
     source={require('../assets/backgroundLogin.jpg ')}> //path here inside
    <Text>React</Text>
</ImageBackground>

Answer 11

对我来说这很好用，我使用 ImageBackground 来设置背景图像：

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, ImageBackground } from 'react-native';
const App: () => React$Node = () => {
return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}> 
      <ImageBackground source={require('./Assets.xcassets/AppBackGround.imageset/2x.png')} style={styles.backgroundImage}>
        <View style={styles.sectionContainer}>
              <Text style={styles.title}>Marketing at the speed of today</Text>
        </View>
      </ImageBackground>
      </View>
    </>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    fontFamily: "-apple-system, BlinkMacSystemFont Segoe UI",
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    height: '100%',
    width: '100%'
  },
  title:{
    color: "#9A9A9A",
    fontSize: 24,
    justifyContent: "center",
    alignItems: "center",
  },
sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default App;