React Native Image组件常用属性

Image 组件是 React Native 中用于显示图像和其他媒体的组件。该组件可用于从浏览器或本地文件系统加载图像，并支持多种格式的媒体文件。下面介绍Image中一些常用属性：

source

source 属性指定要显示的图像的来源。它可以是一个本地文件路径，一个远程 URL 或一个 require() 函数的返回值，该函数将返回一个图片资源。下面是一个加载本地图片的示例：

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style=>
      <Image source={require('./assets/image.jpg')} style= />
    </View>
  );
}

export default App;

defaultSource

defaultSource 属性指定当加载图像失败时要显示的默认图像。下面是一个示例：

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style=>
      <Image 
        source= 
        style= 
        defaultSource={require('./assets/default-image.jpg')} 
      />
    </View>
  );
}

export default App;

resizeMode

resizeMode 属性指定如何调整图像的大小以适应 Image 组件的视图框。它可以取以下值：

contain：缩小图像，以使整个图像适合组件的视图框，在垂直或水平方向上可能存在空白区域。
cover：调整图像大小，以适应组件的视图框，但保持纵横比例。如果图像与组件视图框的纵横比不同，则可能存在空白区域。
stretch：拉伸图像以填充整个组件视图框，不保持纵横比例。
center：居中显示图像，不进行缩放。
repeat：图像按原本大小在x、y轴方向不断重复排布，直至将组件填充满，不进行缩放，超出组件部分会裁剪掉。

下面是一个示例：

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style=>
      <Image source={require('./assets/image.jpg')} resizeMode="contain" style= />
    </View>
  );
}

export default App;

blurRadius

blurRadius 属性指定图像的模糊半径。它允许您在加载图像时应用模糊效果。下面是一个示例：

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style=>
      <Image 
        source={require('./assets/image.jpg')} 
        style= 
        blurRadius={10} 
      />
    </View>
  );
}

export default App;

style

style 属性指定 Image 组件的样式。样式可以控制图像的大小、位置、边框以及其他属性。下面是一个示例：

import React from 'react';
import { View, Image } from 'react-native';

const App = () => {
  return (
    <View style=>
      <Image source={require('./assets/image.jpg')} style= />
    </View>
  );
}

export default App;

onLoad

当图像加载完成后，会触发这个属性的事件处理函数。您可以使用它来更新状态或执行其他操作。下面是一个示例：

import React, { useState } from 'react';
import { View, Image, Text } from 'react-native';

const App = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const handleOnLoad = () => {
    setIsLoaded(true);
  };

  return (
    <View style=>
      <Image 
        source={require('./assets/image.jpg')} 
        style= 
        onLoad={handleOnLoad} 
      />
      {isLoaded && <Text>Image is loaded!</Text>}
    </View>
  );
}

export default App;

onError

当图像加载失败时，会触发这个属性的事件处理函数。您可以使用它来更新状态或执行其他操作。下面是一个示例：

import React, { useState } from 'react';
import { View, Image, Text } from 'react-native';

const App = () => {
  const [hasError, setHasError] = useState(false);

  const handleOnError = () => {
    setHasError(true);
  };

  return (
    <View style=>
      {!hasError ? (
        <Image 
          source= 
          style= 
          onError={handleOnError} 
        />
      ) : (
        <Text>Image failed to load!</Text>
      )}
    </View>
  );
}

export default App;

onLoadStart

当图像开始加载时，会触发这个属性的事件处理函数。您可以使用它来更新状态或执行其他操作。下面是一个示例：

import React, { useState } from 'react';
import { View, Image, ActivityIndicator } from 'react-native';

const App = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleOnLoadStart = () => {
    setIsLoading(true);
  };

  const handleOnLoadEnd = () => {
    setIsLoading(false);
  };

  return (
    <View style=>
      {isLoading ? (
        <ActivityIndicator size="large" />
      ) : (
        <Image 
          source={require('./assets/image.jpg')} 
          style= 
          onLoadStart={handleOnLoadStart}
          onLoadEnd={handleOnLoadEnd} 
        />
      )}
    </View>
  );
}

export default App;

onProgress

当图像正在加载时，会触发这个属性的事件处理函数。它可以用作实时更新加载百分比等。下面是一个示例：

import React, { useState } from 'react';
import { View, Image, Text } from 'react-native';

const App = () => {
  const [progress, setProgress] = useState(0);

  const handleOnProgress = event => {
    const { loaded, total } = event.nativeEvent;
    setProgress(loaded / total);
  };

  return (
    <View style=>
      <Image 
        source={require('./assets/image.jpg')} 
        style= 
        onProgress={handleOnProgress} 
      />
      <Text>{Math.round(progress * 100)}%</Text>
    </View>
  );
}

export default App;

Image组件常用属性