如何在React和ReactNative中使用骨架屏幕

介绍

骨架屏幕 是由 Luke Wroblewski 创造的一个术语，用于描述在逐渐将内容加载到容器中时显示中性元素的用户体验模式。

该模式侧重于提高 感知性能 。与空白屏幕或传统微调器相比，骨架屏幕的持续时间较短。

运动和线性渐变动画被认为比静止或脉动加载动画更快。对于图像，使用占位符元素的主色也很有效。

在本文中，您将看到几种在 React 和 React Native 应用程序中实现骨架屏幕的解决方案。

在 React 中使用骨架屏幕

在 React 中，可以通过 componentDidMount 和线性渐变来实现骨架屏效果。

但是，您可能需要考虑一些更强大的社区选项来鼓励可扩展性，而不是实现自己的解决方案：react-content-loader、react-skeletor 和 react-loading-skeleton。

react-content-loader 加载了列表、代码以及 Facebook 风格和 Instagram 风格的加载卡的预设。它还允许自定义 SVG、元素和颜色。

以下是 react-content-loader 的示例：

import ContentLoader, { Facebook } from 'react-content-loader';

const MyFacebookLoader = () => <Facebook />

const MyLoader = () => (
  <ContentLoader>
    {/* Pure SVG */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

另外，react-placeholder 和 SVG-Skeleton 是另外两个流行的开箱即用解决方案，它们提供占位符组件和样式。

react-skeletor 通过提供高阶组件与加载条件的直接连接，允许完全自定义。

以下是 react-skeletor 的示例：

import { createSkeletonProvider, createSkeletonElement } from '@trainline/react-skeletor';

const H1 = createSkeletonElement('h1');
const H2 = createSkeletonElement('h2');

const NameCard = ({ firstName, lastName }) => (
  <div>
    <H1 style={style}>{ firstName }</H1>
    <H2 style={style}>{ lastName }</H2>
  </div>
)

const UserDetailPage = ({ user }) => (
  <div>
    ...
    <NameCard user={user} />
    ...
  </div>
)

export default createSkeletonProvider(
  // Dummy data with a similar shape to the component's data.
  {
    user: {
      firstName: '_____',
      lastName: '_____'
    }
  },

  // Predicate that returns true if the component is in a loading state.
  ({ user }) => user === undefined,

  // Define the placeholder styling for the children elements.
  () => ({
    color: 'grey',
    backgroundColor: 'grey'
  })
)(UserDetailPage)

这篇博文进一步详细介绍了使用 react-skeletor 的好处。

react-loading-skeleton 自动从样式本身创建骨架屏幕，完全无需创建专用的骨架屏幕组件。

以下是 react-loading-skeleton 的示例：

import Skeleton from 'react-loading-skeleton';

const Blogpost = () => <div style={{ fontSize: 20, lineHeight: 2 }}>
  <h1>{this.props.title || <Skeleton />}</h1>
  {this.props.body || <Skeleton count={10} />}
</div>

在 React 中使用骨架屏幕到此结束。

在 React Native 中使用骨架屏幕

React Native 应用程序可以考虑两个社区选项：react-native-svg-animated-linear-gradient 和 react-native-shimmer。

react-native-svg-animated-linear-gradient 可以创建动画线性渐变效果。

以下是 react-native-svg-animated-linear-gradient 的示例：

import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';

// Instagram style.
<SvgAnimatedLinearGradient height={300}>
    <Circle cx="30" cy="30" r="30"/>
    <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
    <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
    <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</SvgAnimatedLinearGradient>

react-native-shimmer 是 Facebook 的 Shimmer 在 iOS 和 Android 中实现的 React Native 实现。

以下是 react-native-shimmer 的示例：

import Shimmer from 'react-native-shimmer';

<Shimmer>
  <Text>Loading...</Text>
</Shimmer>

在 React Native 中使用骨架屏幕到此结束。

探索替代方案

在 React 之外，JavaScript 社区也解决了这个问题。 Placeload.js 是一种流行的解决方案。 jquery.skeleton.loader 是一个 jQuery 插件。

并且 Semantic UI 有自己的内置 Placeholder 元素。

使用图像和主色

图像的主要颜色可以在加载内容之前为用户提供指导和上下文，而不是使用渐变创建微光效果。

从图像中提取原色的一些资源：color-thief、node-vibrant 和 color-loader。

结论

在本文中，您看到了几种在 React 和 React Native 应用程序中实现骨架屏幕的解决方案。

Luke Wroblewski 的演示介绍了骨架屏幕。

这些文章详细介绍了使用骨架屏：关于骨架屏你需要知道的一切和停止使用加载微调器，有更好的东西。

服务器端渲染 (SSR) 是管理用户页面加载体验的重要组成部分。相关的骨架屏幕应该包含在“App Shell”和初始页面加载中。 Addy Osmani 介绍了它如何与 React 一起工作。

可访问性应该是一个考虑因素，因为屏幕阅读器和辅助软件在涉及额外的页面元素（如骨架屏幕）时可能会出错并产生令人困惑的体验。 Ray Roman 建议使用 ARIA 标签，如 aria-disabled={true} 或 aria-label="loading"，以帮助忽略这些元素。

在实现骨架屏幕之前，您可能希望考虑 A Bone to Pick with Skeleton Screens 中的反论点。