ресурса ставит плейсхолдер бэкграунд и с фэйдом показывает картинку, когда она успешно загрузилась.
Использую его в FlatList, в котором можно удалять айтемы, список при изменени данных незаметно перерендеривается для пользователя, как и должно быть. Но в картинке триггерится евент загрузки снова6 хоть он его и достает из кеша наверняка. Соответсвенно появляется мигание. Подскажите кто-нибудь как задетектить, что картинка уже загружена и не выполнять никаких манипуляций снова с бэкграундом и фэйд анимацией.
export const Image: FC<ImageProps> = (props) => {
const { style, placeholderBackgroundColor, onLoadEnd, ...otherProps } = props;
const theme = useTheme();
const [opacity] = useState(() => new Animated.Value(0));
const backgroundColor = useMemo(
() => placeholderBackgroundColor ?? theme.colors.backgroundTertiary,
[theme, placeholderBackgroundColor],
);
const handleLoadEnd = useCallback(
(p) => {
console.log('onLoadEnd');
Animated.timing(opacity, {
toValue: 1,
duration: 150,
easing: Easing.linear,
}).start();
if (onLoadEnd) {
onLoadEnd();
}
},
[onLoadEnd, opacity],
);
return (
<View
style={[
style,
{
backgroundColor,
},
]}
>
<Animated.Image
onLoadEnd={handleLoadEnd}
style={[
style,
{
opacity,
},
]}
{...otherProps}
/>
</View>
);
};
Никто не делал подобное? До сих пор не разобрался.
Обсуждают сегодня