如何解决React Native ImageBackground 仅显示白色图像
我的 ImageBackground 模块仅显示白色背景。显示的代码基本上是来自 React 官方文档 ImageBackgrounds 的样板模板。我的 uri 不为空。 “props.route.params.image”是来自 react-native-camera 模块的 TakePictureResponse 类型。
我看过与此类似的问题,他们的解决方案已经在我的中实现了。
const styles = StyleSheet.create({
container: {
flex: 1,flexDirection: 'column',},image: {
flex: 1,resizeMode: 'cover',justifyContent: 'center',}
})
render() {
return (
<View style={styles.container}>
<ImageBackground
source={{uri: this.props.route.params.image.uri}}
style={styles.image}
/>
</View>
);
}
解决方法
You should mention height and width for image Styling and wrap the content inside ImageBackground (just use ImageBackground like a View Component)
image: {
resizeMode: 'cover',justifyContent: 'center',width:'100%',height:'100%'
}
// Example
// App.js
import React from 'react';
import { StyleSheet,Text,View,ImageBackground} from 'react-native';
export default function App() {
const imageUrl = 'https://images.pexels.com/photos/312418/pexels-photo-312418.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
return (
<View style={styles.container}>
<ImageBackground
source={{uri: imageUrl}}
style={styles.image}
>
<Text
style={{userSelect:'text',color: '#fff',fontWeight:'bold',fontSize:32,marginTop: 180}}>{'My Text Element'}</Text>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,flexDirection: 'column',},image: {
resizeMode: 'cover',justifyContent:'flex-start',alignItems:'center',height:'100%'
}
})
,
-
确保 ImageBackground 内的 View 组件为 { backgroundColor: undefined }
-
如果 {backgroundColor: '#fff'} 那么白色层将覆盖背景图像
<ImageBackground
source={{uri: imageUrl}}
style={styles.image}
>
<View style={{
// (eliminate 'white' layers)
backgroundColor: undefined,height:'100%',alignItems:'center'}}>
<Text style={{ color: '#fff',marginTop: 180}}> {'My Text Element'}
</Text>
</View>
</ImageBackground>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。