如何在 Expo React Native 中链接照片 - JavaScript

在 Expo React Native 中链接照片需要使用 Image 组件。在 Image 组件中使用 source 属性来指定图片的路径。

使用网络图片

使用网络图片只需要在 source 属性中指定图片的 URL 地址即可。

import { Image } from 'react-native';

<Image source={{ uri: 'https://your-image-url.com' }} style={{ width: 200, height: 200 }} />

使用本地图片

使用本地图片需要将图片放在项目的某个目录下，然后在 source 属性中指定图片的路径，路径需要使用 require 方法来解析。

import { Image } from 'react-native';

<Image source={require('./path/to/your/image.png')} style={{ width: 200, height: 200 }} />

注意，require 方法只能使用相对路径，不能使用绝对路径。

图片缓存

Expo React Native 中自带图片缓存功能。只需要在 Image 组件的 source 属性中添加 cache 属性即可开启缓存功能。

import { Image } from 'react-native';

<Image 
  source={{ uri: 'https://your-image-url.com', cache: 'only-if-cached' }} 
  style={{ width: 200, height: 200 }} 
/>

cache 属性有三个选项:

• default：根据 HTTP 头信息决定是否缓存。
• force-cache：强制使用缓存。
• only-if-cached：仅仅使用缓存，否则从网络请求数据。

图片加载指示器

在网络不够稳定的情况下，图片的加载可能会比较慢。为了提高用户体验，我们可以添加一个加载指示器。

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

const [isLoading, setIsLoading] = useState(true);

<Image 
  source={{ uri: 'https://your-image-url.com' }} 
  style={{ width: 200, height: 200 }} 
  onLoad={() => setIsLoading(false)}
/>

{isLoading && (
  <ActivityIndicator style={{ position: 'absolute', top: '50%', left: '50%' }} />
)}

在 Image 组件中，我们可以使用 onLoad 事件来监听图片加载完成的状态。当图片加载完成后，将 isLoading 设置为 false，这时候加载指示器就可以隐藏了。

总结

在 Expo React Native 中链接照片使用 Image 组件，可以使用网络图片和本地图片，支持图片缓存和加载指示器。