React Native 中的图片

React Native 提供了Image组件来加载和显示图片。以下是几个常用的用例。

加载本地图片

要加载本地图片，需要在工程目录中创建一个名为assets的文件夹，然后在其中放置要使用的图片。

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

const App = () => {
  return (
    <View>
      <Image 
        source={require('./assets/my-image.png')} 
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

export default App;

在上面的代码片段中，我们首先导入了Image组件，然后在组件中使用require函数来加载my-image.png图片文件。最后将Image组件呈现在View组件中，设置它的宽和高为200。这会将图片加载显示出来。

加载网络图片

要加载网络图片，只需要将图片的 URL 作为source属性的值即可。

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

const App = () => {
  return (
    <View>
      <Image 
        source={{ uri: 'https://example.com/my-image.png' }} 
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

export default App;

在上面的代码片段中，我们将uri属性设为图片的 URL，然后设置Image组件的宽和高为200。React Native 会自动将图片下载并缓存到设备上。

调整图片的大小

可以通过以下方式来调整图片的大小：

<Image 
  source={require('./assets/my-image.png')} 
  style={{ width: 200, height: 200 }}
/>

在上面的代码片段中，我们将style属性传递给Image组件，并将它的宽和高都设为200。这会将图片缩放为指定大小。

裁剪图片

可以使用resizeMode属性来调整图片的裁剪方式。以下是几个可用的选项。

| 值 | 描述 | | --- | --- | | cover | 将图片按比例缩放到容器尺寸内，然后居中裁剪多余的部分 | | contain | 将图片按比例缩放到容器尺寸内，然后居中显示 | | stretch | 拉伸图片以填充整个容器 | | repeat | 将图片平铺以填充整个容器 |

以下是一个使用cover模式的代码片段：

<Image
  source={require('./assets/my-image.png')}
  style={{ width: 200, height: 200, resizeMode: 'cover' }}
/>

缓存图片

React Native 使用ImageCacheManager组件来缓存已下载的图片。可以通过以下方式来使用它：

import { ImageCacheManager } from 'react-native-cached-image';

const manager = ImageCacheManager();

manager.downloadAndCacheUrl('https://example.com/my-image.png')
  .then(res => {
    console.log('图片已缓存。');
  })
  .catch(err => {
    console.log('图片缓存失败。');
  });

在上面的代码片段中，我们首先导入了ImageCacheManager组件，然后创建了一个名为manager的变量。接下来，我们调用downloadAndCacheUrl方法并将图片的 URL 作为参数传入。最后，我们使用then和catch方法来处理成功和失败的情况。

结论

React Native 的Image组件是加载和显示图片的主要方式。可以使用它来加载本地和网络图片，并控制图片的大小和裁剪方式。同时可以使用ImageCacheManager组件来缓存已下载的图片。