[ 卡卡 DAY 22 ] - React Native 元件害羞之骨架屏先让你瞧 react-native-skeleton-placeholder

咦 大家有见网友的经验吗？
在还没见面前是否都是以照片来判断这个人是不是自己的菜？
网站也有一个时间是还没 loading 好的时间差
今天来教大家做一个 shap 骨架屏，在你还没与真正的元件见面的时候
先用照骗跟形状住进他心中！直到与他相见 XD

今天要介绍的套件是 react-native-skeleton-placeholder

安装

这个插件需要安装 @react-native-masked-view/masked-view and react-native-linear-gradient

1. 安装 masked-view

npm install @react-native-masked-view/masked-view react-native-linear-gradient --save

cd ios
pod install

2. 安装 react-native-skeleton-placeholder

npm install react-native-skeleton-placeholder --save

cd ios
pod install

先建立一个 Placeholder.js 在 components/

import React from 'react';
import { View } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const Placeholder = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SkeletonPlaceholder>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ width: 60, height: 60, borderRadius: 50 }} />
          <View style={{ marginLeft: 20 }}>
            <View style={{ width: 120, height: 20, borderRadius: 4 }} />
            <View
              style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
            />
          </View>
        </View>
      </SkeletonPlaceholder>
    </View>
  );
};
export default Placeholder;

我长这样 ~~~

如何增加影子

import React from 'react';
import { View } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const Placeholder = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SkeletonPlaceholder>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <View style={{ width: 60, height: 60, borderRadius: 50 }} />
          <View style={{ marginLeft: 20 }}>
            <View style={{ width: 120, height: 20, borderRadius: 4 }} />
            <View
              style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
            />
          </View>
        </View>
        // add--
        <View>
          <View
            style={{ marginTop: 6, width: 100, height: 30, borderRadius: 50 }}
          />
        </View>
        // --end
      </SkeletonPlaceholder>
    </View>
  );
};
export default Placeholder;

就会多出现一条线拉！！

3. 到需要骨架屏的页面放入 Placeholder 判断画面是否读画面是否读取好

import Placeholder from '@src/components/Placeholder'

const [ isloading, setLoading ]= useState(true)

// 在页面读取好资料後将使用 setLoading(false)
// 运用 isloading？ 来判断要是用画面还是 Placeholder

今日结论

其实这个套件就是照着原本画面刻出一个一样的影子！再来判断是否 loading 完成，简简单单的使用，就算是看不到本人也看得到背影～～～让画面不空白不突然展开 :P

Day22 done~ 请多多指教