如何在 React Native 中拉伸静态图像作为背景? [英] How to stretch a static image as background in React Native?

问题描述

我想在我的本机应用程序中使用背景图片，图像比屏幕小，所以我必须拉伸它.

I'd like to use a background image in my react native app, the image is smaller than the screen, so I have to stretch it.

但如果图像是从资产包加载

var styles = StyleSheet.create({
  bgImage: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    resizeMode: 'stretch',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

<Image source={require('image!background')} style={styles.bgImage}>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
</Image>

看起来像这样:

然而，它对远程图像工作正常，通过 source={{uri: 'background-image-uri'}}:

however, it works fine for a remote image, through source={{uri: 'background-image-uri'}}:

推荐答案

来自 Github 问题:图片{require} 在 React Native for Resizing 中被破坏，你可以试试 <Image style={{width: null, height: null}}，希望 facebook 尽快修复它.

From Github issue: Image {require} is broken in React Native for Resizing, you could try <Image style={{width: null, height: null}}, hope that facebook would fix it soon.

这篇关于如何在 React Native 中拉伸静态图像作为背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！