读懂React Native读取本地图片方式，轻松获取应用资源

2023-11-28 21:51:50

理解本地图片的本质

本地图片通常是指保存在应用包中的图片。这些图片可以是任何格式，如PNG、JPEG、GIF等。在React Native中，可以通过require()函数来读取本地图片。require()函数会返回一个ImageSource对象，该对象可以传递给<Image>组件，用于在应用中显示图片。

2. React Native读取本地图片的多种方式

在React Native中，有几种方法可以读取本地图片：

2.1 使用`require()`函数

这是最简单直接的读取本地图片方式。require()函数可以接受一个相对或完整的图片文件地址。例如：

const image = require('./assets/image.png');

2.2 使用`ImagePicker`组件

ImagePicker组件允许用户从设备中选择图片。可以使用ImagePicker组件来读取本地图片，并将其传递给<Image>组件，用于在应用中显示图片。例如：

import ImagePicker from 'react-native-image-picker';

const selectImage = () => {
  ImagePicker.launchImageLibrary({}, (response) => {
    if (response.uri) {
      const image = { uri: response.uri };
      setImage(image);
    }
  });
};

2.3 使用`CameraRoll`组件

CameraRoll组件允许用户查看设备中的照片和视频。可以使用CameraRoll组件来读取本地图片，并将其传递给<Image>组件，用于在应用中显示图片。例如：

import CameraRoll from '@react-native-community/cameraroll';

const getPhotos = () => {
  CameraRoll.getPhotos({
    first: 20,
    assetType: 'Photos',
  }).then(data => {
    setPhotos(data.edges);
  });
};