尽管尝试了不同的样式选项,但背景图像并未在iOS设备上充满整个屏幕。而在Android设备上,它看起来很好,并且可以填充所有背景空间。
我在iPhone6设备和iPhone 11模拟器上也遇到了同样的问题。左右两侧似乎有白色边缘,背景图像没有覆盖,但这在android设备上不会发生。
这是iOS和android的两个模拟器的并排图片,iOS在右侧。
我尝试使用样式属性resizeMode,其值包含'cover','stretch','contain'等,但它们似乎都没有影响..这是代码:
import React from 'react';
import { Text, View, Platform, ImageBackground } from 'react-native';
import { Button } from 'native-base'
var myBackground = require('./assets/icons/landing.jpg')
export default function App() {
return (
<View style={styles.container}>
<ImageBackground
source={myBackground}
style={styles.imageStyle}
>
<View style={styles.viewStyle}>
<Text
style={styles.titleStyle}
>Welcome to pokeSearch</Text>
<Button
block={true}
style={styles.buttonStyle}
onPress={() => { }}
>
<Text style={styles.buttonText}>Start Searching</Text>
</Button>
</View>
</ImageBackground>
</View>
);
}
const styles = {
container: {
flex: 1,
// marginTop: Platform.OS === "android" ? 20 : 0,
justifyContent: 'center',
alignItems: 'center'
},
buttonOuterLayout: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
buttonLayout: {
// marginTop: 10,
// paddingRight: 10,
// paddingLeft: 10
},
viewStyle: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
titleStyle: {
fontSize: 30,
color: 'blue',
alignItems: 'center'
},
imageStyle: {
// flex: 1,
width: null,
height: null,
resizeMode: 'contain'
// justifyContent: 'flex-end',
// alignItems: 'center'
},
buttonStyle: {
margin: 10
},
buttonText: {
color: 'white'
}
}
我希望背景图片能够像在Android上一样覆盖iOS上的背景。
答案 0 :(得分:0)
解决方案是如下更改backgroundImage样式:
imageStyle: {
flex: 1,
width: '100%',
height: '100%',
resizeMode: 'cover'
}
所有功劳归于matPag和https://stackoverflow.com/a/50233429/2910520