status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 09:45:04 +00:00
Code Issues Projects Releases Wiki Activity

Add center ImageResizeMode option

Browse Source 
Summary:Adds a `center` option to `Image`'s `resizeMode` prop, which doesn't enlarge images.
This is how it looks in UIExplorer:
{F60386921}

Reviewed By: dmmiller

Differential Revision: D3064284

fb-gh-sync-id: 79cd2da8f44c5b3da2e42d3bebf3131335f53c28
shipit-source-id: 79cd2da8f44c5b3da2e42d3bebf3131335f53c28
This commit is contained in:
Alon Schwarz 2016-03-19 11:24:06 -07:00 committed by Facebook Github Bot 7
parent 05b9902ae6
commit fb8340d289
5 changed files with 68 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
Examples/UIExplorer/ImageExample.js
View File

@ -1,4 +1,11 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
@ -383,38 +390,54 @@ exports.examples = [
return (
<View>
{[smallImage, fullImage].map((image, index) => {
return <View style={styles.horizontal} key={index}>
<View>
<Text style={[styles.resizeModeText]}>
Contain
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.contain}
source={image}
/>
return (
<View key={index}>
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Contain
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.contain}
source={image}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Cover
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.cover}
source={image}
/>
</View>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Cover
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.cover}
source={image}
/>
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Stretch
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.stretch}
source={image}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Center
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.center}
source={image}
/>
</View>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Stretch
</Text>
<Image
style={styles.resizeMode}
resizeMode={Image.resizeMode.stretch}
source={image}
/>
</View>
</View>;
);
})}
</View>
);
@ -459,7 +482,7 @@ exports.examples = [
{
title: 'Image Size',
render: function() {
return <ImageSizeExample source={fullImage} />;
return <ImageSizeExample source={fullImage} />;
},
platform: 'ios',
},

6
Libraries/Image/ImageResizeMode.js
View File

@ -34,6 +34,12 @@ var ImageResizeMode = keyMirror({
* distorting it.
*/
stretch: null,
/**
* center - The image will be scaled down such that it is completely visible,
* if bigger than the area of the view.
* The image will not be scaled up.
*/
center: null,
});
module.exports = ImageResizeMode;

4
ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java
View File

@ -89,7 +89,9 @@ import com.facebook.react.uimanager.events.TouchEventType;
"ScaleAspectFit",
ImageView.ScaleType.FIT_CENTER.ordinal(),
"ScaleAspectFill",
ImageView.ScaleType.CENTER_CROP.ordinal())));
ImageView.ScaleType.CENTER_CROP.ordinal(),
"ScaleAspectCenter",
ImageView.ScaleType.CENTER_INSIDE.ordinal())));
DisplayMetrics displayMetrics = DisplayMetricsHolder.getWindowDisplayMetrics();
DisplayMetrics screenDisplayMetrics = DisplayMetricsHolder.getScreenDisplayMetrics();

3
ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java
View File

@ -33,6 +33,9 @@ public class ImageResizeMode {
if ("stretch".equals(resizeModeValue)) {
return ScalingUtils.ScaleType.FIT_XY;
}
if ("center".equals(resizeModeValue)) {
return ScalingUtils.ScaleType.CENTER_INSIDE;
}
if (resizeModeValue == null) {
// Use the default. Never use null.
return defaultValue();

3
ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.java
View File

@ -42,6 +42,9 @@ public class ImageResizeModeTest {
assertThat(ImageResizeMode.toScaleType("stretch"))
.isEqualTo(ScalingUtils.ScaleType.FIT_XY);
assertThat(ImageResizeMode.toScaleType("center"))
.isEqualTo(ScalingUtils.ScaleType.CENTER_INSIDE);
// No resizeMode set
assertThat(ImageResizeMode.defaultValue())
.isEqualTo(ScalingUtils.ScaleType.CENTER_CROP);