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>

ImageBackground不接受ResizeMode

2 个答案: