介绍

甲骨架屏幕是通过创造的术语卢克莱夫斯基用于描述用于显示中性成分，同时逐渐将内容加载到容器中的用户体验的图形。

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

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

在本文中，您将看到几种在 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是在 iOS 和 Android 中实现的 Facebook Shimmer的 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 插件。

而语义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"来帮助忽略这些元素。

在实现骨架屏幕之前，您可能希望考虑使用骨架屏幕挑选骨头中的反驳论点。