全屏背景图像与网络和本地存储的行为不同 [英] Full Screen Background Image behaves differently from network and local storage

问题描述

我正在尝试将背景图像拉伸到全屏.
从网络和本地存储获取图像时，图像的行为似乎有所不同.

I am trying to stretch a background-image to full screen.
Images seem to behave differently when fetched from Network and from Local storage.

此函数不会按要求拉伸图像(从右侧有大约 70 像素的白边):这是我的 render() 基金:

This function does not stretch the image as requested (there is a white margin of around 70 pixels from the right): This is my render() fundtion:

  var BackgroundImage = require('./images/logo_og.png');

  render(){
    return(
      <View style={[{flex: 1, alignItems: 'stretch'}]}>
      <Image source={BackgroundImage} style={[{flex: 1}]} >
      </Image>
    </View>
  );

相同的渲染函数可以很好地显示从网络获取的图像:

The same render function works well displaying the image being fetched from the network:

  render(){
    return(
      <View style={[{flex: 1, alignItems: 'stretch'}]}>
      <Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} style={[{flex: 1}]} >
      </Image>
    </View>
  );

知道发生了什么吗?

推荐答案

报告了类似问题 这里.尝试将图像的宽度设置为 null:

Similar issue was reported here. Try setting the Image's width to null:

<Image source={BackgroundImage} style={[{flex: 1, width: null}]} >

这篇关于全屏背景图像与网络和本地存储的行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！