我想在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访问像素密度，但没有关于屏幕尺寸…
任何想法？
（这已被弃用，现在您可以使用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 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'
}
});
我很确定你可以摆脱
注意：此解决方案已过时。请参阅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>
