#android #image #react-native #png #tintcolor
#Android #изображение #react-native #png #tintcolor
Вопрос:
Я создаю простое приложение для своей дипломной работы на бакалавриате в react native, и у меня есть эти изображения в формате PNG, которые пользователь может перемещать.
Изображения также могут изменять tintColor, который работает нормально, и они начинаются с их исходного цвета. Проблема возникает, когда я устанавливаю tintColor, а затем пытаюсь «сбросить» его снова, тогда изображение просто становится невидимым.
Изображение при его добавлении
Изображение после изменения на цвет, а затем снова на ноль
Как вы можете видеть на изображениях ниже, изображение все еще там, но просто не видно.
Код для установки tintColor в стиле выглядит примерно так:
<Animated.Image
source={source}
resizeMode={'contain'}
style={[
styles.item,
tintColor === null ? {} : { tintColor: tintColor },
{
transform: [{ scale: imgScale }],
},
]}
/>
Когда изображения загружаются, а значение равно null, оно не устанавливает никакого tintColor, но если я установлю tintColor, а затем вернусь к null, оно просто полностью удалит все цвета на нем. Я пробовал разные вещи, и пока ничего не получалось. Я хочу, чтобы пользователь мог «сбросить» обратно исходные цвета PNG, особенно для некоторых из них, у которых уже есть свои собственные цвета.
Изображения загружаются динамически из списка, когда я их добавляю, и их можно перетаскивать.
Комментарии:
1. Установите два стиля, styles.item без tintcolor и styles.tintItem с tinntcolor, затем переключайтесь между ними, используя условие
2. привет, спасибо за комментарий. Я уже пробовал это, это не сработало .. потому что я установил оттенок цвета через другой компонент (например, всплывающее меню с полукругом, которое вы можете видеть на скриншоте). Просто странно, что когда он отображается в первый раз, а tintColor (как состояние) имеет значение null, но когда он повторно отображается с новым оттенком и возвращается к null, он невидим. Я попытался добавить условие для стиля, но тогда я не могу установить разные цвета, и я попытался установить его как со стилем, так и с оттенком, который вы видите выше
Ответ №1:
Дайте им ключ ={Math.random}, если вы не хотите сбрасывать. Но если вы хотите изменить цвет, вы должны предоставить им статический ключ. Это решит вашу проблему.
Редактировать: key={this.state.tintIt?Math.random:’a12′}