圖像無法在反應原生全寬

我想使用全寬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}}，但它給了我一個空錯誤。任何解決方案，非常感謝。謝謝。

來源

2016-01-13 Kelvin Aliyanto

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

來源

2016-01-13 10:59:37 Almouro

嗨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" />

來源

2016-01-13 09:01:11

感謝您的反饋，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>'}} />;

來源

2017-02-23 23:55:32

圖像無法在反應原生全寬

回答

相關問題