如何在 React Native 中将静态图像拉伸为背景？

Question

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

但如果图像是从资产包

加载的，则它不起作用

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'}}:

，它对于远程图像工作正常

Answer 1

Image 标签通常不应被视为容器视图。

使用包含您的 (stretched/contained) 图像的绝对定位包装器似乎效果很好：

var styles = StyleSheet.create({
    bgImageWrapper: {
        position: 'absolute',
        top: 0, bottom: 0, left: 0, right: 0
    },
    bgImage: {
        flex: 1,
        resizeMode: "stretch"
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    }
});



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

Answer 2

您始终可以使用 Dimensions 模块获取屏幕宽度并将图像的宽度样式设置为该值：

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

远程图像工作正常似乎也很奇怪...您可以尝试使用 source={{uri: 'local_image_file_name' isStatic: true}}.

使用 uri 语法加载本地静态图像

Answer 3

来自 Github 问题：Image {require} is broken in React Native for Resizing，您可以尝试 <Image style={{width: null, height: null}}，希望 facebook 尽快修复它。

Answer 4

我使用 undefined 而不是 null 值。在typescript环境下，会提示not assignable

 bgImage: {
flex: 1,
width: undefined,
height: undefined,
resizeMode: 'stretch',

},

如何在 React Native 中将静态图像拉伸为背景？

How to stretch a static image as background in React Native?

react-native