时间戳

首页 > 解决方案 > 传递静态图像以对带有 @2x 后缀的本地社区滑块做出反应

javascript - 传递静态图像以对带有 @2x 后缀的本地社区滑块做出反应

问题描述

我一直有一个问题，即我传递给滑块中 thumbImage 的图像在不同的 android 设备上具有不同的尺寸，其中一些设备太大了所以我决定使用 @2x 和 @3x 后缀传递图像提供不同屏幕密度的图像

但是我不确定在这种情况下如何使用它

这是我的代码的一部分

有进口

import HandleActiveIcon from './img/handle-active.png';
import HandleIcon from './img/handle.png';

传递给滑块的道具

const Slider = ({
  minimumTrackTintColor = colors.primary,
  maximumTrackTintColor = 'transparent',
  minimumTrackTintColorActive = colors.secondary,
  maximumTrackTintColorActive = 'transparent',
  minimumValue = 0,
  maximumValue = 100,
  initialValue,
  thumbTintColor = colors.secondary,
  thumbTintColorActive = colors.primary,

  thumbImage = HandleIcon,
  thumbImageActive = HandleActiveIcon,

  onSlidingStart = () => {},
  onSlidingComplete = () => {},
  onValueChange = () => {},
  throttleTime = 100,
  step = 10,
}

这就是滑块组件

 <SliderComponent
      style={style.slider}
      minimumValue={minimumValue}
      maximumValue={maximumValue}
      minimumTrackTintColor={
        isActive ? minimumTrackTintColorActive : minimumTrackTintColor
      }
      maximumTrackTintColor={
        isActive ? maximumTrackTintColorActive : maximumTrackTintColor
      }
      thumbImage={isActive ? thumbImageActive : thumbImage}
      value={initialValue}
      onSlidingStart={handleSlidingStart}
      onSlidingComplete={handleSlidingComplete}
      onValueChange={handleValueChange}
      step={step}
    />

我确实遵循了这个文件夹模型

.
├── slider.js
└── img
    ├── HandleIcon.png
    ├── HandleIcon@2x.png
    └── HandleIcon@3x.png

不知道之后如何处理？

有任何想法吗 ？

谢谢你

标签： javascriptreact-native

解决方案

推荐阅读