介绍
一个 skeleton screen 是一个由 Luke Wroblewski发明的术语,用于描述显示中性元素的用户体验模式,同时逐渐将内容加载到容器中。
这种模式侧重于改善感知的性能,与空白屏幕或传统旋转器相比,骨骼屏幕的持续时间较短。
运动和线性梯度动画被认为比不动或脉冲加载动画更快。
在本文中,您将被介绍几个解决方案,用于在您的 React 和 React Native 应用程序中实现骨骼屏幕。
在React中使用骨骼屏幕
在React中,可以通过componentDidMount和线性梯度实现骨骼屏幕效果。
然而,而不是实施自己的解决方案,您可能想考虑一些更强大的社区选项,以鼓励可扩展性:反应内容加载器,反应骨骼和反应加载骨骼。
react-content-loader配备了列表,代码和Facebook和Instagram风格的加载卡的预设,还允许自定义SVG、元素和颜色。
以下是react-content-loader的例子:
1import ContentLoader, { Facebook } from 'react-content-loader';
2
3const MyFacebookLoader = () => <Facebook />
4
5const MyLoader = () => (
6 <ContentLoader>
7 {/* Pure SVG */}
8 <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
9 <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
10 <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
11 </ContentLoader>
12)
另一种选择是, react-placeholder和 SVG-Skeleton是另外两种流行的盒子外解决方案,提供场所组件和风格。
react-skeletor允许通过提供高级组件直接连接到负载条件器来完全定制。
以下是反应骨骼的一个例子:
1import { createSkeletonProvider, createSkeletonElement } from '@trainline/react-skeletor';
2
3const H1 = createSkeletonElement('h1');
4const H2 = createSkeletonElement('h2');
5
6const NameCard = ({ firstName, lastName }) => (
7 <div>
8 <H1 style={style}>{ firstName }</H1>
9 <H2 style={style}>{ lastName }</H2>
10 </div>
11)
12
13const UserDetailPage = ({ user }) => (
14 <div>
15 ...
16 <NameCard user={user} />
17 ...
18 </div>
19)
20
21export default createSkeletonProvider(
22 // Dummy data with a similar shape to the component's data.
23 {
24 user: {
25 firstName: '_____',
26 lastName: '_____'
27 }
28 },
29
30 // Predicate that returns true if the component is in a loading state.
31 ({ user }) => user === undefined,
32
33 // Define the placeholder styling for the children elements.
34 () => ({
35 color: 'grey',
36 backgroundColor: 'grey'
37 })
38)(UserDetailPage)
这篇博客文章进一步详细介绍了使用反应骨架的好处(https://codeburst.io/achieve-skeleton-loading-with-react-a12404678030)。
react-loading-skeleton自动从风格本身创建骨骼屏幕,完全消除了创建专用的骨骼屏幕组件的需要。
以下是反应加载骨骼的一个例子:
1import Skeleton from 'react-loading-skeleton';
2
3const Blogpost = () => <div style={{ fontSize: 20, lineHeight: 2 }}>
4 <h1>{this.props.title || <Skeleton />}</h1>
5 {this.props.body || <Skeleton count={10} />}
6</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的例子:
1import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';
2
3// Instagram style.
4<SvgAnimatedLinearGradient height={300}>
5 <Circle cx="30" cy="30" r="30"/>
6 <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
7 <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
8 <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
9</SvgAnimatedLinearGradient>
react-native-shimmer是 Facebook 的 Shimmer在 iOS 和 Android 上实现的 React Native 实现。
以下是react-native-shimmer的例子:
1import Shimmer from 'react-native-shimmer';
2
3<Shimmer>
4 <Text>Loading...</Text>
5</Shimmer>
这结束了在React Native中使用骨骼屏幕。
探索替代品
在 React 之外,JavaScript 社区也解决了这个问题。 Placeload.js是一个流行的解决方案。
其次,它有其自身的内置空间元素(Placeholder)。
使用图像和主导色彩
与此相反,通过梯度创建更闪发光的效果,图像的主导色彩可以在内容加载之前为用户提供指导和背景。
從圖像中提取主要顏色的一些資源: color-thief, node-vibrant,和 color-loader。
结论
在本文中,您被介绍了在您的 React 和 React Native 应用程序中实现骨骼屏幕的几种解决方案。
此演示由 Luke Wroblewski介绍骨骼屏幕。
这些文章详细介绍了使用骨骼屏幕的内容: 所有你需要知道的骨骼屏幕和 停止使用加载旋转器,有更好的东西。
Serverside Rendering (SSR)是管理用户页面加载体验的一大部分,相关的骨骼屏幕应包括在应用壳和初始页面加载中。
可访问性应该是考虑的问题,因为屏幕阅读器和辅助软件可以变成混乱的体验,当涉及到额外的页面元素,如骨骼屏幕时。
在实施骨骼屏幕之前,您可能希望考虑在 A Bone to Pick with Skeleton Screens中的反论点。