在React Native中添加全屏幕背景图片的最佳方式是什么？
我想添加一个全屏图像到视图，所以我写这个代码
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, } ...
但这样我怎么才能find真正的iPhone屏幕大小？
我已经看到一个API来访问像素密度，但没有关于屏幕尺寸…
任何想法？
您可以在<Image>元素上使用flex: 1样式来填充整个屏幕。 然后，您可以使用图像大小调整模式之一来让图像完全填充该元素：
<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> ，这将工作。
这是我做到的。 主要的交易是摆脱静态固定大小。
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, } };
试试这个解决scheme 这是正式支持。 我刚刚testing它，并完美地运作。
var styles = StyleSheet.create({ backgroundImage: { flex: 1, alignSelf: 'stretch', width: null, } });
至于使用它作为背景图像，只要做到以下几点。
<Image style={styles.backgroundImage}> <View> <Text>All your stuff</Text> </View> </Image>
我尝试了几个这些答案无济于事的android使用react-native版本= 0.19.0。
出于某种原因，我的样式表里面的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或包含。
希望这可以帮助！
根据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>
如果您想将其用作背景图片，则需要使用<ImageBackground> 2017年6月底推出的新的<ImageBackground>组件。 它支持嵌套，而<Image>很快就不会。
这是提交摘要：
我们正在取消对组件内嵌套视图的支持。 我们决定这样做是因为具有这个特性使得支持
<Image>intrinsinc content size是不可能的; 所以当转换过程完成时，不需要明确指定图像大小，可以从实际图像位图中推断。这是＃0步骤。
是非常简单的插入式replace，它通过非常简单的样式来实现这个function。 请使用，而不是如果你想放进去的东西。
您需要确保您的图像resizeMode = {Image.resizeMode.contain}或{Image.resizeMode.stretch}并将图像样式宽度设置为null
<Image source={CharacterImage} style={{width: null,}} resizeMode={Image.resizeMode.contain}/>
从0.14开始，这个方法将不起作用，所以我build立了一个静态组件，这个组件对于你们来说很简单。 您可以将其粘贴或引用为组件。
这应该是可重用的，它将允许您添加额外的样式和属性，如果它是一个标准的<Image />组件
const BackgroundImage = ({ source, children, style, ...props }) => { return ( <Image source={source} style={{flex: 1, width: null, height: null, ...style}} {...props}> {children} </Image> ); }
只要将其粘贴，然后就可以像图片一样使用它，它应该适合它所在视图的整个尺寸（所以如果它是顶视图，它将填满你的屏幕。
<BackgroundImage source={require('../../assets/backgrounds/palms.jpg')}> <Scene styles={styles} {...store} /> </BackgroundImage>
点击这里预览图像
值为null的宽度和高度不适用于我，然后我认为使用顶部，底部，左侧和右侧的位置，它的工作。 例：
bg: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, resizeMode: 'stretch', },
和JSX：
<Image style={styles.bg} source={{uri: 'IMAGE URI'}} />
如果你还没有解决它，React Native v.0.42.0有resizeMode
<Image style={{resizeMode: 'contain'}} source={require('..img.png')} />
import React, { Component } from 'react'; import { Image, StyleSheet } from 'react-native'; export default class App extends Component { render() { return ( <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} /> ); } } const s = StyleSheet.create({ backgroundImage: { flex: 1, width: null, height: null, } });
你可以试试： https : //sketch.expo.io/B1EAShDie （来自： github.com/Dorian/sketch-reactive-native-apps ）
文档： https ： //facebook.github.io/react-native/docs/images.html#background-image-via-nesting
你也可以使用你的图像作为容器：
render() { return ( <Image source={require('.http://img.dovov.combackground.png')} style={styles.container}> <Text> This text will be on top of the image </Text> </Image> ); } const styles = StyleSheet.create({ container: { flex: 1, width: undefined, height: undefined, justifyContent: 'center', alignItems: 'center', }, });
另一个简单的解决scheme
<Image source={require('../assets/background.png')} style={{position: 'absolute', zIndex: -1}}/> <View style={{flex: 1, position: 'absolute'}}> {/*rest of your content*/} </View>
我听说过必须使用BackgroundImage，因为将来你应该不能嵌套Image标签。 但我无法得到BackgroudImage来正确显示我的背景。 我所做的是将我的图像embedded到视图标记中，并且对外部视图以及图像进行样式设置。 键将宽度设置为空，并将resizeMode设置为“拉伸”。 以下是我的代码：
import React, {Component} from 'react'; import { View, Text, StyleSheet, Image} from 'react-native'; export default class BasicImage extends Component { constructor(props) { super(props); this.state = {}; } render() { return ( <View style={styles.container}> <Image source={this.props.source} style={styles.backgroundImage} /> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, width: null, height: null, marginBottom: 50 }, text: { marginLeft: 5, marginTop: 22, fontFamily: 'fontawesome', color: 'black', fontSize: 25, backgroundColor: 'rgba(0,0,0,0)', }, backgroundImage: { flex: 1, width: null, height: null, resizeMode: 'stretch', } });
像antoine129所说的那样使用<ImageBackground> 。 对孩子使用<Image>现在不推荐使用。
class AwesomeClass extends React.Component { render() { return ( <ImageBackground source={require('image!background')} style={styles.container}> <YourAwesomeComponent/> </ImageBackground> ); } } var styles = StyleSheet.create({ container: { flex: 1, } };
截至10月17日的最新情况 （RN> = .46 ）
import React from 'react'; import { ... ImageBackground, } from 'react-native'; render() { return ( <ImageBackground source={require('path/to/img')} style={styles.urStyle}> </ImageBackground> ); }
http://facebook.github.io/react-native/releases/0.49/docs/images.html#background-image-via-nesting
