尽管尝试了不同的样式选项,但背景图像并未在iOS设备上充满整个屏幕。而在Android设备上,它看起来很好,并且可以填充所有背景空间。
我在iPhone6设备和iPhone 11模拟器上也遇到了同样的问题。左右两侧似乎有白色边缘,背景图像没有覆盖,但这在android设备上不会发生。
这里是iOS和android的两个模拟器的并排图片,iOS在右侧。
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9hcnpGbC5wbmcifQ==” alt =“仿真器图片”>“ >>
我尝试使用styles属性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上的背景。
背景图片无法在iOS设备上填充整个屏幕,尽管尝试了不同的样式选项。而在Android设备上,它看起来很好,并且可以填充所有背景空间。我得到了相同的...
解决方案是如下更改backgroundImage样式: