咦 大家有見網友的經驗嗎？
在還沒見面前是否都是以照片來判斷這個人是不是自己的菜？
網站也有一個時間是還沒 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~ 請多多指教