React native 使react内容加载器具有响应性

不久前，我遇到了一个问题，在制作react内容加载器时遇到了一个问题-

我应该如何处理这个问题？您将如何使其响应

编辑： 我打开了一个问题，他帮我解决了这个问题，所以我为任何遇到这个问题并需要解决方案的人制作了这个帖子：） 再次感谢Danilo提供的这一令人惊叹的解决方案和这一令人惊叹的软件包

import React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";

import ContentLoader, { Rect } from "react-content-loader/native";

// viewBox width / viewBox height
const ASPECT_RATIO = 300 / 70;

const MyLoader = () => (
  <ContentLoader height="100%" width="100%" viewBox="0 0 380 70">
    <Rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
);

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.small}>
        <MyLoader />
      </View>
      <View style={styles.haft}>
        <MyLoader />
      </View>
      <View style={styles.full}>
        <MyLoader />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    justifyContent: "flex-start",
    flex: 1,
  },
  small: {
    aspectRatio: ASPECT_RATIO,
    width: "20%",
  },
  haft: {
    aspectRatio: ASPECT_RATIO,
    width: "50%",
  },
  full: {
    aspectRatio: ASPECT_RATIO,
    width: "100%",
  },
});

从“React”导入React；
从“react native”导入{SafeAreaView，StyleSheet，View}；
从“react content loader/native”导入ContentLoader，{Rect}；
//视口框宽度/视口框高度
常量纵横比=300/70；
常量MyLoader=（）=>(
);
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
flexDirection:“列”，
justifyContent:“灵活启动”，
弹性：1，
},
小型：{
纵横比：纵横比，
宽度：“20%”，
},
轴：{
纵横比：纵横比，
宽度：“50%”，
},
全部：{
纵横比：纵横比，
宽度：“100%”，
},
});

我投票结束这个问题，因为它不是一个问题