反应本机 ImageBackground 未在 IOS 设备上显示
react native ImageBackground not showing on IOS device
我正在使用react native的ImageBackground组件,但是在IOS(设备)中它不显示图像,在模拟器中显示图像
这是什么?
代码如下:
import { ImageBackground } from 'react-native';
const imgSrc = require('../../assets/images/bg-login.png');
<ImageBackground
resizeMode="cover"
source={imgSrc}
style={style.backgroundImage}
>
样式如下:
backgroundImage: {
width: screenWidth,
height: '100%'
},
render() {
return (
<View style={{ flex: 1 }}>
<ImageBackground
resizeMode="cover"
source={require('../assets/oops.png')}
style={{width:Dimensions.get('screen').width,height:Dimensions.get('screen').height}}
>
</ImageBackground>
</View>
);
}
尝试此代码并根据您的要求使用 resizeMode
您是否将 asset
文件夹添加到您的 iOS 构建中?
指挥官来做:
react-native bundle --minify --entry-file index.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios
您将在 ios
文件夹中看到资产文件夹和 main.jsbundle
文件。之后转到 Xcode -> build phases -> copy bundle resources
,然后添加 asset
文件夹和 main.jsbundle
文件。不要忘记点击 Copy if needed
我正在使用react native的ImageBackground组件,但是在IOS(设备)中它不显示图像,在模拟器中显示图像 这是什么?
代码如下:
import { ImageBackground } from 'react-native';
const imgSrc = require('../../assets/images/bg-login.png');
<ImageBackground
resizeMode="cover"
source={imgSrc}
style={style.backgroundImage}
>
样式如下:
backgroundImage: {
width: screenWidth,
height: '100%'
},
render() {
return (
<View style={{ flex: 1 }}>
<ImageBackground
resizeMode="cover"
source={require('../assets/oops.png')}
style={{width:Dimensions.get('screen').width,height:Dimensions.get('screen').height}}
>
</ImageBackground>
</View>
);
}
尝试此代码并根据您的要求使用 resizeMode
您是否将 asset
文件夹添加到您的 iOS 构建中?
指挥官来做:
react-native bundle --minify --entry-file index.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios
您将在 ios
文件夹中看到资产文件夹和 main.jsbundle
文件。之后转到 Xcode -> build phases -> copy bundle resources
,然后添加 asset
文件夹和 main.jsbundle
文件。不要忘记点击 Copy if needed