[ 卡卡 DAY 17 ] - React Native 用 Animated 来做简单骨架屏

上一章节讲了 Animated 的使用
我们运用 start() 来做个骨架屏唷！

制作 banner 骨架屏

1. 引入 Animated

import { Animated } from 'react-native';

2. 建立初始值

thumbnailAnimated = new Animated.Value(0); // 骨架屏的初始值
imageAnimated = new Animated.Value(0); // 真正banner的初始值

3. 写入 Animated.Image

// 骨架屏
<Animated.Image
    {...props}
    source={thumbnailSource}
    style={[style, { opacity: this.thumbnailAnimated }]}
    onLoad={this.handleThumbnailLoad}
    blurRadius={1}
/>
// banner
<Animated.Image
    {...props}
    source={source}
    style={[styles.imageOverlay, { opacity: this.imageAnimated }]}
    onLoad={this.onImageLoad}
/>

4. 写 handleThumbnailLoad 及 onImageLoad 的 function

// 骨架屏
handleThumbnailLoad = () => {
    Animated.timing(this.thumbnailAnimated, {
    toValue: 1
    }).start();
};
// banner
onImageLoad = () => {
    Animated.timing(this.imageAnimated, {
    toValue: 1,
    duration: 1000
    }).start();
};

5. 做一个有 banner 的 screen 引入 ProgressiveImage

    <ProgressiveImage
        thumbnailSource={require('../asset/version-1.png')} // 骨架屏图片
        source={img} // banner
        style={styles.bannerImg}
        resizeMode="cover"
        text="文字文字"
    />

ProgressiveImage.js

import React from 'react';
import { View, Animated, StyleSheet, Text } from 'react-native';

class ProgressiveImage extends React.Component {
    thumbnailAnimated = new Animated.Value(0);
    imageAnimated = new Animated.Value(0);
    handleThumbnailLoad = () => {
        Animated.timing(this.thumbnailAnimated, {
        toValue: 1
        }).start();
    };
    onImageLoad = () => {
        Animated.timing(this.imageAnimated, {
        toValue: 1,
        duration: 1000
        }).start();
    };
    render() {
        const { thumbnailSource, source, style, ...props } = this.props;
        return (
            <View style={styles.container}>
                <Animated.Image
                    {...props}
                    source={thumbnailSource}
                    style={[style, { opacity: this.thumbnailAnimated }]}
                    style={style}
                    onLoad={this.handleThumbnailLoad}
                    blurRadius={1}
                />
                <Animated.Image
                    {...props}
                    source={source}
                    style={[styles.imageOverlay, { opacity: this.imageAnimated }]}
                    onLoad={this.onImageLoad}
                />
                <Text style={[styles.bannerText, { lineHeight: 0 }]}>
                    {props.text}
                </Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    imageOverlay: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        top: 0
    },
    container: {
        backgroundColor: '#e1e4e8'
    },
    bannerText: {
        color: "#fff",
        position: 'absolute',
        left: 15,
        bottom: 100
    }
});
export default ProgressiveImage;

运用 animated 的特性将图片读取後慢慢淡出，倘若没有读取成功，就会由骨架屏来显示！！
倘若骨架屏不想有图片只想有背景色
可忽略所有有包含 thumbnail 文字的 func or 变数
他会取 container 的背景颜色来当预设

Day18 done，请多多指教～