图像无法在反应原生全宽

问题描述：

我想使用全宽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}}，但它给了我一个空错误。任何解决方案，非常感谢。谢谢。

答

是的，有一个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, 
    }, 
});

嗨Almouro，这个解决方案实际上是诀窍！但是，我需要设置resizeMode作为封面，而不是包含:) –

嗨@KelvinAliyanto，很高兴它的工作！ – Almouro

答

试试这个android:scaleType="fitXY"

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

感谢您的反馈，Rohit。是ImageView本地组件还是插件？ –

这是本机组件 –

答

您可以使用react-native-scalable-image。以下示例将为您提供全屏宽度图像：

import React from 'react'; 
import { Dimensions } from 'react-native'; 
import Image from 'react-native-scalable-image'; 

const image = <Image width={Dimensions.get('window').width} source={{uri: '<image uri>'}} />;

图像无法在反应原生全宽

相关推荐