@uiw/react-native/lib/TransitionImage/index.js

UIW for React Native

import React, { useState } from 'react';
import { Animated, Image as ImageNative, StyleSheet, View, TouchableOpacity, ActivityIndicator, Text } from 'react-native';
import Icon from '../Icon';
export default function TransitionImage(props) {
  const [state, setState] = useState({
    placeholderOpacity: new Animated.Value(1),
    isLoading: true,
    hasError: false
  });
  const onLoad = e => {
    const {
      transition,
      onLoad,
      transitionDuration
    } = props;
    if (!transition) {
      setState({
        ...state,
        isLoading: false
      });
      state.placeholderOpacity.setValue(0);
      return;
    }
    Animated.timing(state.placeholderOpacity, {
      toValue: 0,
      duration: transitionDuration,
      useNativeDriver: true
    }).start();
    setState({
      ...state,
      isLoading: false
    });
    onLoad && onLoad(e);
  };
  const onError = e => {
    setState({
      ...state,
      isLoading: false,
      hasError: true
    });
  };
  const {
    onPress,
    onLongPress,
    Component = onPress || onLongPress ? TouchableOpacity : View,
    placeholderStyle,
    PlaceholderContent,
    containerStyle,
    childrenContainerStyle = null,
    style = {},
    ImageComponent = ImageNative,
    children,
    disabled = false,
    ...attributes
  } = props;
  const hasImage = Boolean(attributes.source);
  const {
    width,
    height,
    ...styleProps
  } = StyleSheet.flatten(style);
  const PlaceholderContentLoading = <View style={styles.errorContainer}>
      <ActivityIndicator />
      <Text style={{
      color: '#fff',
      marginTop: 8
    }}>加载中...</Text>
    </View>;
  const PlaceholderContentError = <View style={styles.errorContainer}>
      <Icon name="circle-close-o" color="#fff" size={24} />
      <Text style={{
      color: '#fff',
      marginTop: 8
    }}>加载失败</Text>
    </View>;
  return <Component onPress={onPress} onLongPress={onLongPress} accessibilityIgnoresInvertColors={true} style={StyleSheet.flatten([styles.container, containerStyle])} disabled={disabled || state.isLoading || state.hasError}>
      <ImageComponent testID="RNE__Image" transition={true} transitionDuration={360} {...attributes} onLoad={onLoad} onError={onError} style={StyleSheet.flatten([StyleSheet.absoluteFill, {
      width: width,
      height: height
    }, styleProps])} />

      <Animated.View pointerEvents={hasImage ? 'none' : 'auto'} accessibilityElementsHidden={hasImage} importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'} style={[styles.placeholderContainer, {
      opacity: hasImage ? state.placeholderOpacity : 1
    }]}>
        <View testID="RNE__Image__placeholder" style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}>
          {state.isLoading && PlaceholderContentLoading}
          {state.hasError && PlaceholderContentError}
          {!state.isLoading && !state.hasError && PlaceholderContent}
        </View>
      </Animated.View>

      <View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
        {children}
      </View>
    </Component>;
}
TransitionImage.displayName = 'Image';
TransitionImage.getSize = ImageNative.getSize;
TransitionImage.getSizeWithHeaders = ImageNative.getSizeWithHeaders;
TransitionImage.prefetch = ImageNative.prefetch;
TransitionImage.abortPrefetch = ImageNative.abortPrefetch;
TransitionImage.queryCache = ImageNative.queryCache;
TransitionImage.resolveAssetSource = ImageNative.resolveAssetSource;
const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent',
    position: 'relative',
    overflow: 'hidden'
  },
  placeholderContainer: {
    ...StyleSheet.absoluteFillObject
  },
  placeholder: {
    backgroundColor: '#bdbdbd',
    alignItems: 'center',
    justifyContent: 'center'
  },
  errorContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(50, 50, 51, .88)',
    height: '100%',
    width: '100%'
  }
});