图片不能正常显示

这是我怎么显示的图片是这个样子的React-Native:图片不能正常显示

<View> 
    <Text style={styles.myTitle}> This is the title 2 </Text> 
    <Image 
     style={{ width: null}} 
     source={require('./images/05.jpg')} 
     resizeMode="stretch" 
    /> 
</View>

随着resizeMode="stretch"我的形象：

相同的图像时显示resizeMode="contain"：

<View> 
    <Text style={styles.myTitle}> This is the title 3</Text> 
    <Image 
     style={{ width: null}} 
     source={require('./images/05.jpg')} 
     resizeMode="contain" 
    /> 
</View>

resizeMode="contain"：

欲被显示像它是如何在所述第二类型的图像，但也有不需要的边缘：

在第一图像中的页边距完美，但没有显示完整的图像。我一直认为contain会照顾，但它在这里没有帮助。我想要的是整个图像没有任何额外的利润。

请帮忙。谢谢。

来源

2017-08-03 Somename

看起来像宽比的问题在这里，'contain'否则将完全如果图像是工作它需要包含的包含元素的确切比例。 – UncaughtTypeError

我认为你必须选择剪裁还是拉伸。 –

@Ihazkode是不是有没有办法显示整个图像而不必裁剪/拉伸？我可以舒展，但它为什么只显示它的一部分？ – Somename

您可以使用cover，但它会裁剪图像的一部分。

为了使它工作，你需要一个高度属性添加到您的形象：

<View> 
    <Text>This is the title 3</Text> 
    <Image 
     style={{ width: null, height: '100%' }} 
     source={require('./image.png')} 
     resizeMode="cover" 
    /> 
    </View>

来源

2017-08-03 09:27:29

它裁剪图像很多。我想显示整个图像没有额外的边距。 – Somename

如果您的图像没有相同的屏幕尺寸，则无法进行此操作。您可以摆脱顶部边距，但下面的空白区域将继续。 –

图片不能正常显示

回答

相关问题