ios - React Native ImageBackground 仅显示白色图像

Question

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

Answer 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%'
  }
})

输出

Answer 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>