mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Sunny Luo
3a4798cc30
Summary: ref: https://github.com/facebook/react-native/pull/28266 Currently, SVG is not recognized as an image in the CLI bundle command, as defined in [assetPathUtils.js](https://github.com/facebook/react-native/blob/main/packages/community-cli-plugin/src/commands/bundle/assetPathUtils.js#L43-L50) . This is the correct behavior, as it ensures that SVG files are copied to the raw folder for Android resources. However, there is an inconsistency with Image.resolveAssetSource, which does not follow the same classification. Instead, it resolves SVG assets to the drawable folder, leading to blank svg rendering errors in some scenario (codepush). ## Changelog [Android][Fixed] - getAndroidResourceFolderName() should return raw folder for svg file Pull Request resolved: https://github.com/facebook/react-native/pull/49452 Test Plan: 1. Use svg file this way `<LocalSvg asset={require('./react-logo.svg')} />` 2. Use `react-native bundle` command to make a bundle and sideload that bundle from sdcard. The svg file should render correctly. Reviewed By: cortinico Differential Revision: D69750779 Pulled By: Abbondanzo fbshipit-source-id: 3af8d4a5da07213cdbb968b070d2507ed897d194
95 lines
2.5 KiB
JavaScript
95 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
/*:: import type {PackagerAsset} from './registry.js'; */
|
|
|
|
const androidScaleSuffix = {
|
|
'0.75': 'ldpi',
|
|
'1': 'mdpi',
|
|
'1.5': 'hdpi',
|
|
'2': 'xhdpi',
|
|
'3': 'xxhdpi',
|
|
'4': 'xxxhdpi',
|
|
};
|
|
|
|
const ANDROID_BASE_DENSITY = 160;
|
|
|
|
/**
|
|
* FIXME: using number to represent discrete scale numbers is fragile in essence because of
|
|
* floating point numbers imprecision.
|
|
*/
|
|
function getAndroidAssetSuffix(scale /*: number */) /*: string */ {
|
|
if (scale.toString() in androidScaleSuffix) {
|
|
// $FlowFixMe[invalid-computed-prop]
|
|
return androidScaleSuffix[scale.toString()];
|
|
}
|
|
// NOTE: Android Gradle Plugin does not fully support the nnndpi format.
|
|
// See https://issuetracker.google.com/issues/72884435
|
|
if (Number.isFinite(scale) && scale > 0) {
|
|
return Math.round(scale * ANDROID_BASE_DENSITY) + 'dpi';
|
|
}
|
|
throw new Error('no such scale ' + scale.toString());
|
|
}
|
|
|
|
// See https://developer.android.com/guide/topics/resources/drawable-resource.html
|
|
const drawableFileTypes = new Set([
|
|
'gif',
|
|
'jpeg',
|
|
'jpg',
|
|
'ktx',
|
|
'png',
|
|
'webp',
|
|
'xml',
|
|
]);
|
|
|
|
function getAndroidResourceFolderName(
|
|
asset /*: PackagerAsset */,
|
|
scale /*: number */,
|
|
) /*: string */ {
|
|
if (!drawableFileTypes.has(asset.type)) {
|
|
return 'raw';
|
|
}
|
|
const suffix = getAndroidAssetSuffix(scale);
|
|
if (!suffix) {
|
|
throw new Error(
|
|
"Don't know which android drawable suffix to use for scale: " +
|
|
scale +
|
|
'\nAsset: ' +
|
|
JSON.stringify(asset, null, '\t') +
|
|
'\nPossible scales are:' +
|
|
JSON.stringify(androidScaleSuffix, null, '\t'),
|
|
);
|
|
}
|
|
return 'drawable-' + suffix;
|
|
}
|
|
|
|
function getAndroidResourceIdentifier(
|
|
asset /*: PackagerAsset */,
|
|
) /*: string */ {
|
|
return (getBasePath(asset) + '/' + asset.name)
|
|
.toLowerCase()
|
|
.replace(/\//g, '_') // Encode folder structure in file name
|
|
.replace(/([^a-z0-9_])/g, '') // Remove illegal chars
|
|
.replace(/^(?:assets|assetsunstable_path)_/, ''); // Remove "assets_" or "assetsunstable_path_" prefix
|
|
}
|
|
|
|
function getBasePath(asset /*: PackagerAsset */) /*: string */ {
|
|
const basePath = asset.httpServerLocation;
|
|
return basePath.startsWith('/') ? basePath.slice(1) : basePath;
|
|
}
|
|
|
|
module.exports = {
|
|
getAndroidResourceFolderName,
|
|
getAndroidResourceIdentifier,
|
|
getBasePath,
|
|
};
|