Question

我想制作一个带有全宽Android屏幕图像的屏幕，但是，由于某些原因我不能这样做。我已经完成了所有可用的解决方案，但它仍然存在。

这是我的代码：

<View style={styles.loginContainer}>
    <Image
        style={styles.background}
        source={require('./image.png')}
        //source={{uri: 'http://previews.123rf.com/images/background.jpg'}}
        opacity={0.8}
    >
    <Login navigator={navigator} />
    </Image>
</View>

和我的样式表：

var styles = StyleSheet.create({
loginContainer: {
    alignSelf: 'stretch',
    flex: 1,
    alignItems: 'stretch'
},
background: {
    alignSelf: 'stretch',
    flex: 1,
    alignItems: 'stretch'
},
});

由于某种原因，当我使用网络图像时它工作得很好，但是当我使用静态图像时，它只会覆盖2/3宽度但是全高。我也尝试过source = {{uri：'image.png'，isStatic：true}}，但它给了我null错误。非常感谢任何解决方案。谢谢。

Answer 1

试试这个android:scaleType="fitXY"

<ImageView
    android:id="@+id/image_view_full"
    android:layout_width="fill_parent"
    android:scaleType="fitXY"
    android:layout_height="fill_parent" />

Answer 2

是的，有open issue on Github。

首先，我建议使用the resizeMode property，例如：

<Image
  style={styles.background}
  source={require('./image.png')}
  opacity={0.8}
  resizeMode="contain"
>

然后，对于网络图像，这将起作用：

var styles = StyleSheet.create({
  loginContainer: {
    flex: 1,
  },
  background: {
    flex: 1,
  },
});

对于“必需”图片，它不起作用，正如您所指出的那样，您可以自己指定宽度：

var width = require('Dimensions').get('window').width;
var styles = StyleSheet.create({
  loginContainer: {
    flex: 1,
  },
  background: {
    flex: 1,
    width: width,
  },
});

甚至可以将其设置为null：

var styles = StyleSheet.create({
  loginContainer: {
    flex: 1,
  },
  background: {
    flex: 1,
    width: null,
  },
});

反应原生的图像不能全宽

2 个答案: