ImageBackground不接受ResizeMode

Question

这里有人能帮我让resizeMode和<ImageBackground>一起工作吗？

它给出了一个错误，即resizeMode应用于View，而后者显然不支持它。

但是我需要找到一个解决办法，因为我发现使用<Image />作为带信息块的背景非常复杂。

提前感谢！

Answer 1

​

<ImageBackground 
  style={[styles.image]} 
  source={{ uri: url }} 
  imageStyle={{resizeMode: 'contain'}}
>
  // other components here
</ImageBackground>

​

希望能帮上忙！

Answer 2

注意:在我写这篇文章时，<ImageBackground />是一个尚未发布的无文档特性。但它现在确实存在。

据我所知，没有<ImageBackground />，但您可以创建一个。

如果您试图将图像设置为某个文本的背景，那么<Image />是最好的方法。你觉得哪里太复杂了？像这样的东西应该管用..。

class BackgroundImage extends Component {

    render() {
        return (
            <Image 
                source={this.props.src}
                style={styles.backgroundImage}>

                    {this.props.children}

            </Image>
        )
    }
}

const styles = StyleSheet.create({
    backgroundImage: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'cover'
    }
});

然后你就会像这样使用它..。

<BackgroundImage
    src={require('./background.jpg')}>

    <Text>Your Content Goes Here!</Text>
</BackgroundImage>