React Native保持宽高比图像ios

我有一个1242 X 450图像，我想在1x 2x和3x设备上显示。当前的代码对于3个设备来说效果不错，但是我发现图像的边缘会在2x设备上裁剪，并可能在1x设备上裁剪。React Native保持宽高比图像ios

在代码我设置宽度414和高度150（因为1242 X 450/3×）

是否有什么办法可以解决这个问题？

的图像是一个列表视图

<View style={styles.row}> 
        <Image 
        style={styles.featureImage} 
        source={{ 
         uri: this.props.image_src 
        }}/> 
    </View> 


const styles = StyleSheet.create({ 
    row: { 
     alignItems: 'center', 
     backgroundColor: 'lightgrey', 
     flexDirection: 'row', 
     margin: 6, 
    }, 

    featureImage: { 
     height: 150, 
     width: 414 
    } 
});

来源

2017-02-15 Yahoo

看看[react-native-scalable-image]（https://www.npmjs.com/package/react-native-scalable-image）。 –

你并不需要处理图像的大小内。你只要正确地给与宽度和高度属性。

导入平台并获取设备的宽度和高度。 https://facebook.github.io/react-native/docs/dimensions.html

var {scrHeight, scrwidth} = Dimensions.get('window');

定义图像容器样式

imageContainer = { 
    width:scrwidth/5, 
    height:scrHeight/5, 
}

定义图像样式和使用resizeMode用于图像

resizeMode枚举（ '盖'， '包含'， '拉伸'，'重复'，'中心'）

imageStyle={ 
flex:1, 
} 
<View style={styles.imageContainer }> 
    <Image style={styles.imageStyle} resizeMode={'contain'}> 
    </Image> 
</View>

无论图像有多大，它都会覆盖screenWidth/5 X screenHeight/5。如果您的图像具有较高的分辨率，而设备不是，则图像将被压缩，反之则会被拉伸。这两种情况下，特别是第二次，如果图像分辨率和图像留下的区域之间存在很大差异，则在应用程序中会出现不良图像视觉。为了避免这种情况，您可以添加不同尺寸的相同图像。

add 
└── img 
    ├── [email protected] 100x100 (resolutions are random) 
    └── [email protected] 150x150 
     [email protected] 175x175

https://facebook.github.io/react-native/docs/images.html

如果这样做正确的图像会选择自动反应。图像根据设备的dpi来选择。如果您的设备具有很好的分辨率，您可以获得更大的图像，如果图像不是很小。除了大尺寸和低分辨率的设备（一些Android平板电脑）之外，这种情况大多适用。在这种情况下根据dpi图像将可能是最小的图像，所以会有不好的质量。

来源

2017-02-15 20:20:13

React Native保持宽高比图像ios

回答

相关问题