随着移动互联网的蓬勃发展，越来越多的应用都开始采用跨平台的开发技术，其中，React Native 作为一个快速开发跨平台应用的框架越来越受到开发者的欢迎。在 React Native 中，图片在应用中占据着非常重要的地位，因为用户体验往往也和图片有很大的关系。
在本文中，我们将重点介绍如何在 React Native 中加载图片并对其进行使用。
加载本地图片
React Native 支持从本地加载图片，这里的本地指的是应用内的资源。
React Native 中有两种方式来加载本地图片：通过 require 加载和通过绝对路径加载。
<Image source={require('./images/logo.png')} /><Image source={{uri: 'file:///sdcard/test.png'}} />使用 require 加载本地图片，只需要提供相对路径即可，而使用绝对路径则需要提供完整路径。
加载网络图片
除了本地图片之外，React Native 还支持加载网络上的图片。加载网络图片需要提供图片地址，这里可以使用绝对路径或相对路径，相对路径会自动转化为绝对路径。
<Image source={{uri: 'https://www.example.com/logo.png'}} />当然，加载网络图片也可以设置显示的宽度和高度。
<Image
source={{uri: 'https://www.example.com/logo.png'}}
style={{width: 200, height: 100}}
/>图片占位符
考虑到特定情况下网络或本地图片可能加载过慢或加载失败，导致界面出现长时间的空白区域，通过设置占位符可以增强用户体验。在 React Native 中，我们可以通过设置默认占位符来处理这种情况。默认占位符可以是一张本地资源图片，也可以是一个 View。
-- -------------------- ---- -------
------
------------- ------------------------------------
---------------------------------------------------
--
------
------------- ------------------------------------
----------------
---- ------------------------------------------
------ ----
------- ---
--
--以上代码的第一个示例中，使用了本地图片作为默认占位符。而第二个示例中，使用了一个 View 作为默认占位符，求实现一个更加灵活的占位符。
图片加载状态
在应用中，空白的图片占位符看起来虽然不错，但是却不能传递给用户一些信息。如果在图片加载时，能够及时通知用户图片状态，那么用户体验将得到大大提高。React Native 提供了三个状态可以展示给用户：
- onLoadStart: 图片加载开始时回调;
- onLoad: 图片加载成功后回调;
- onError: 图片加载失败后回调。
<Image
source={{uri: 'https://www.example.com/logo.png'}}
onLoadStart={() => console.log('图片加载')}
onLoad={() => console.log('图片加载成功')}
onError={() => console.log('图片加载失败')}
/>图片缓存
在 React Native 应用中，如果加载的图片是相对稳定的，而且这些图片没有经常更新，那么我们可以考虑缓存这些图片，以便在用户下次访问时能够更快地加载图片。React Native 通过 Image 组件自带的 cache 属性来支持图片的缓存。默认情况下，React Native 将缓存所有已加载的图片，直到应用被销毁。
<Image
source={{uri: 'https://www.example.com/logo.png'}}
cache='force-cache'
/>上述代码的 cache 属性被设置为 force-cache，这会强制让 React Native 缓存所有的图片数据。当然，如果不想让 React Native 缓存图片数据，可以将 cache 属性设为 default。
总结
React Native 中的图片加载和使用需要我们注意好几个细节，包括：图片加载方式、占位符、加载状态和图片缓存等。当我们理解了这些内容之后，就能够更好地去实现自己的需求并提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a994d968c7c53b064ae4b