介绍
react-native-img-with-placeholder 是一款基于 React Native 的图片占位组件。它可以帮助开发者在加载图片前显示占位图，提升用户体验。
安装
可以使用 npm 或者 yarn 安装该包：
npm install react-native-img-with-placeholder yarn add react-native-img-with-placeholder
使用
该组件的 API 与官方的 <Image> 组件大致相同，只需传入两个必选的 prop：source 和 placeholderSource，其中 source 表示图片的真实地址，placeholderSource 表示占位图的地址。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----------- ---- ---------------
------ ------------------ ---- ------------------------------------
------ ------- -------- ----- -
------ -
----- -------------------------
-------------------
--------------------
------------- -------------------------------------------------
------------------------------------------------------
--
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
------ -
------ ----
------- ----
--
---配置
可以配置 ImgWithPlaceholder 组件的默认占位图，以及加载图片时的 loading 效果。
设置默认占位图
可以在应用启动时设置 ImgWithPlaceholder.defaultProps.placeholderSource 来设置所有该组件的默认占位图。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----------- ---- ---------------
------ ------------------ ---- ------------------------------------
------------------------------------------------- - -------------------------------------------
------ ------- -------- ----- -
------ -
----- -------------------------
-------------------
--------------------
------------- -------------------------------------------------
--
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
------ -
------ ----
------- ----
--
---设置 loading 效果
可以使用 ImgWithPlaceholder 的 loadingRender 属性自定义加载图片时的效果。
例如，可以使用 ActivityIndicator 组件实现一个旋转的 loading 效果：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ----------- ------------------ ---- ---------------
------ ------------------ ---- ------------------------------------
------ ------- -------- ----- -
----- ------------- - -- -- -
------------------ ------------ -----------------
--
------ -
----- -------------------------
-------------------
--------------------
------------- -------------------------------------------------
------------------------------------------------------
-----------------------------
--
-------
--
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
------ -
------ ----
------- ----
--
---总结
本文介绍了 npm 包 react-native-img-with-placeholder 的用法和配置方法，该组件可以帮助开发者在加载图片前显示占位图，提升用户体验。希望本文能对前端开发者有所帮助。完整示例代码可以在 GitHub 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd981e8991b448da799