我想在视图中添加一个全屏图像，所以我写了这段代码
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 来访问像素密度，但对屏幕尺寸一无所知......
（这已被弃用，现在您可以使用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,
}
};
您可以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>包装你的形象，这会奏效。
注意：此解决方案是旧的。请参考 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>
<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 >
我使用 react-native version = 0.19.0 尝试了其中几个答案对 android 无济于事。
出于某种原因，我的样式表中的 resizeMode 无法正常工作？然而，当样式表有
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 或 contains 。
希望这可以帮助！