推荐使用SkeletonPlaceholder：React Native的优雅加载占位符库

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
 
const { width, height } = Dimensions.get('window');
 
const MyComponent = () => {
  return (
    <View style={styles.container}>
      <SkeletonPlaceholder>
        <SkeletonPlaceholder.Item
          width={wp('90%')}
          height={hp('20%')}
          borderRadius={10}
          marginTop={hp('5%')}
        />
        <SkeletonPlaceholder.Item
          width={wp('80%')}
          height={hp('15%')}
          marginTop={hp('2%')}
          borderRadius={10}
        />
        {/* 更多的占位符项... */}
      </SkeletonPlaceholder>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default MyComponent;

这个代码实例展示了如何在React Native应用中使用SkeletonPlaceholder组件来创建优雅的占位符。它定义了一个名为MyComponent的函数组件，该组件返回一个包含了多个动态尺寸和样式的占位符项的SkeletonPlaceholder容器。使用了react-native-responsive-screen库中的widthPercentageToDP和heightPercentageToDP函数来帮助开发者创建响应式的占位符。