zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-17 20:39:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Image support for variable resolution images

Browse Source 
Renders the asset scale which is closest to the window scale. Requires bundler integration.

Close #1456

Co-authored-by: David Calhoun <dpcalhoun@gmail.com>
This commit is contained in:
Evan Bacon
2019-07-31 13:41:53 -07:00
committed by Nicolas Gallagher
parent c8b73fa4e4
commit a7ab961d95
3 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap
+4 -4
View File
@@ -317,14 +317,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
>
<div
class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
style="filter: url(#tint-31);"
style="filter: url(#tint-33);"
/>
<svg
style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
>
<defs>
<filter
id="tint-31"
id="tint-33"
>
<feflood
flood-color="blue"
@@ -366,7 +366,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
>
<div
class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-30);"
style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-32);"
/>
<img
alt=""
@@ -379,7 +379,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
>
<defs>
<filter
id="tint-30"
id="tint-32"
>
<feflood
flood-color="red"
packages/react-native-web/src/exports/Image/__tests__/index-test.js
Vendored
+19
View File
@@ -1,9 +1,11 @@
/* eslint-env jasmine, jest */
/* eslint-disable react/jsx-no-bind */
import * as AssetRegistry from '../../../modules/AssetRegistry';
import Image from '../';
import ImageLoader from '../../../modules/ImageLoader';
import ImageUriCache from '../ImageUriCache';
import PixelRatio from '../../PixelRatio';
import React from 'react';
import { render } from '@testing-library/react';
@@ -200,6 +202,23 @@ describe('components/Image', () => {
loadCallback();
expect(container.firstChild).toMatchSnapshot();
});
test('it correctly selects the source scale', () => {
AssetRegistry.getAssetByID = jest.fn(() => ({
httpServerLocation: 'static',
name: 'img',
scales: [1, 2, 3],
type: 'png'
}));
PixelRatio.get = jest.fn(() => 1.0);
let { container } = render(<Image source={1} />);
expect(container.querySelector('img').src).toBe('http://localhost/static/img.png');
PixelRatio.get = jest.fn(() => 2.2);
({ container } = render(<Image source={1} />));
expect(container.querySelector('img').src).toBe('http://localhost/static/img@2x.png');
});
});
describe('prop "style"', () => {
packages/react-native-web/src/exports/Image/index.js
Vendored
+9 -1
View File
@@ -18,6 +18,7 @@ import { getAssetByID } from '../../modules/AssetRegistry';
import resolveShadowValue from '../StyleSheet/resolveShadowValue';
import ImageLoader from '../../modules/ImageLoader';
import ImageUriCache from './ImageUriCache';
import PixelRatio from '../PixelRatio';
import StyleSheet from '../StyleSheet';
import TextAncestorContext from '../Text/TextAncestorContext';
import View from '../View';
@@ -70,7 +71,14 @@ const resolveAssetUri = source => {
if (typeof source === 'number') {
// get the URI from the packager
const asset = getAssetByID(source);
const scale = asset.scales[0];
let scale = asset.scales[0];
if (asset.scales.length > 1) {
const preferredScale = PixelRatio.get();
// Get the scale which is closest to the preferred scale
scale = asset.scales.reduce((prev, curr) =>
Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale) ? curr : prev
);
}
const scaleSuffix = scale !== 1 ? `@${scale}x` : '';
uri = asset ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}` : '';
} else if (typeof source === 'string') {