React Native Placeholder(OCSkeleton)骨架屏使用

一直想知道骨架屏是怎么实现的，今天写了个demo，记录一下基本使用方法。
1.先看效果吧

QQ20180627-155628-HD.gif

2.直接上代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    SafeAreaView,
    ScrollView,
    Button,
} from 'react-native';


import Placeholder from 'rn-placeholder'
import CustomPlaceholder from "./Common/CustomPlaceholder";


/**
 * 页面名称
 */
export default class Mine extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isReady: false,
        }
    }


    _loadComplete = () => {
        this.setState({
            isReady:!this.state.isReady,
        })
    }


    render() {
        return (
            


                 this._loadComplete()}
                    style={styles.btnStyle}
                />

                
                    图文布局
                    
                        图文内容布局
                    


                    
                        一行直线的布局
                        
                            一行直线的布局
                        
                    

                    
                        只有图片的布局
                        
                            只有图片的布局
                        
                    

                    
                        段落布局
                        
                            段落布局
                        
                    

                    
                        Box布局
                        
                            Box布局
                        
                    

                    
                        这是自定义demo
                        
                    

                


            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#F5F5F5",
        flex:1
    },
    box: {
        width: '90%',
        margin: 10,
    },
    content: {
        paddingVertical: 10,
        paddingHorizontal: 10,
    },
    btnStyle:{
        top:0,
    }


});

import React from 'react';
import { Text } from 'react-native';
import Placeholder from 'rn-placeholder';

const customPlaceholder = (props) => {
    const style = { backgroundColor: props.bgColor };
    return I m a custom loader with props bgColor = {props.bgColor};
};

export default Placeholder.connect(customPlaceholder);

源码出处