React Native ImageBackground 仅显示白色图像答案

【问题标题】：React Native ImageBackground showing white image onlyReact Native ImageBackground 仅显示白色图像
【发布时间】：2021-05-11 13:46:24
【问题描述】：

我的 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>
    );
  }

【问题讨论】：

标签： ios react-native react-native-camera imagebackground

【解决方案1】：

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',
    width:'100%',
    height:'100%'
  }
})

output

【讨论】：

更改样式并不能解决问题。
如果路由参数包含图像对象 (图像 || 默认图像) const imageURI = {uri: (this.props.route.params.image.uri || "@987654322 @)} 如果路由参数不包含图像对象，那么这将呈现这个i.stack.imgur.com/wt9CG.png（图像）
我不相信您会阅读我的完整帖子。我的 uri 不为空。您提供的这个解决方案适用于那些拥有空 uri 的人。
我读过，但破例并不是一个坏主意

【解决方案2】：

确保 ImageBackground 中 View 组件的 { backgroundColor: undefined }
如果 {backgroundColor: '#fff'} 则白色层将覆盖背景图像


<ImageBackground
          source={{uri: imageUrl}}
          style={styles.image}
        >
        <View style={{
            // (eliminate 'white' layers)
            backgroundColor: undefined,
            width:'100%', height:'100%', alignItems:'center'}}>

          <Text style={{ color: '#fff',fontWeight:'bold', 
                    fontSize:32, marginTop: 180}}> {'My Text Element'}
          </Text>

          </View>
</ImageBackground>

【讨论】：

此解决方案也不起作用。不知道你想做什么。在我的背景上添加另一个视图并不能解决我的 ImageBackground 仍然是白色的事实......
我说的是包裹在 ImageBackground 中的 View 组件，如果子（视图）组件样式为 { flex: 1, backgroundColor : 'white' } 这将在图像上方创建另一个白色层
这发生在我身上一次
没有嵌套视图。您可以在 OP 中看到视图的外观。
official doc 工作正常 -> snack.expo.io/@purplecode/imagebackground ，您应该将内容包装起来。对于和对于 {// content }