一直想知道骨架屏是怎么实现的，今天写了个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 (
            <SafeAreaView style={styles.container}>


                <Button
                    color="#841584"
                    title='加载完毕设置'
                    onPress={() => this._loadComplete()}
                    style={styles.btnStyle}
                />

                <ScrollView style={styles.content}


                >
                    <Text style={styles.box}>图文布局</Text>
                    <Placeholder.ImageContent
                        size={80}
                        animate="fade"
                        lineNumber={4}
                        lineSpacing={5}
                        lastLineWidth="70%"
                        firstLineWidth="70%"
                        onReady={this.state.isReady}
                        color='pink'
                        position='right' //left  right
                        hasRadius={true}  // false  true
                        textSize={14}
                        width='100%'
                    >
                        <Text>图文内容布局</Text>
                    </Placeholder.ImageContent>


                    <View style={styles.box}>
                        <Text style={styles.box}>一行直线的布局</Text>
                        <Placeholder.Line

                            animate="fade"
                            width='50%'
                            onReady={this.state.isReady}
                            color='pink'
                            hasRadius={false}
                        >
                            <Text>一行直线的布局</Text>
                        </Placeholder.Line>
                    </View>

                    <View style={styles.box}>
                        <Text style={styles.box}>只有图片的布局</Text>
                        <Placeholder.Media
                            size={30}
                            animate="fade"
                            onReady={this.state.isReady}
                            color='pink'
                        >
                            <Text>只有图片的布局</Text>
                        </Placeholder.Media>
                    </View>

                    <View style={styles.box}>
                        <Text style={styles.box}>段落布局</Text>
                        <Placeholder.Paragraph
                            animate="fade"  //动画
                            lineNumber={4} //行数
                            lineSpacing={5} //行高
                            lastLineWidth="70%" //第一行
                            firstLineWidth='100%' //最后一行
                            onReady={this.state.isReady}
                            color='pink' //背景色
                            width='70%' //除首尾
                            textSize={15} //字号

                        >
                            <Text>段落布局</Text>
                        </Placeholder.Paragraph>
                    </View>

                    <View style={styles.box}>
                        <Text style={styles.box}>Box布局</Text>
                        <Placeholder.Box
                            width={15}
                            height={15}
                            radius={7}
                            color='pink'
                            onReady={this.state.isReady}
                        >
                            <Text>Box布局</Text>
                        </Placeholder.Box>
                    </View>

                    <View style={styles.box}>
                        <Text style={styles.box}>这是自定义demo</Text>
                        <CustomPlaceholder
                            animate="fade"
                            bgColor="yellow"
                            onReady={this.state.isReady}

                        />
                    </View>

                </ScrollView>


            </SafeAreaView>
        );
    }
}

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 <Text style={style}>I m a custom loader with props bgColor = {props.bgColor}</Text>;
};

export default Placeholder.connect(customPlaceholder);

源码出处