尝试为个人资料图片制作动画，但现在甚至不会出现在个人资料页面上

Question

我正在尝试使个人资料图片动起来，但是当我查看它时，它甚至都不会出现。该应用程序不会中断，它只会转到没有图像的页面。我要做的就是创建一个仅用于图片的文件，并将所有代码放在其中，然后将其导出到配置文件页面并在视图中呈现。由于我使用URI链接作为源，因此我确保在const App中而不是在const Styles中对其进行样式设置。有人介意看看并看看可能有什么问题吗？

//HomerProfilePicture.js
import React, { Component } from "react";
import { View, Image, StyleSheet, Animated } from "react-native";

class ImageLoader extends Component {
  state = {
    opacity: new Animated.Value(0)
  };
  onLoad = () => {
    Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true
    }).start();
  };
  render() {
    return (
      <Animated.Image
        onLoad={this.onLoad}
        {...this.props}
        style={[
          {
            opacity: this.state.opacity,
            transform: [
              {
                scale: this.state.opacity.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.85, 1]
                })
              }
            ]
          },
          this.props.style
        ]}
      />
    );
  }
}

const App = () => (
  <View style={styles.container}>
    <ImageLoader
      style={{
          width: "100%",
          height: "100%",
          marginTop: -250,
          alignItems: "center"
      }}
      resizeMode="cover"
      source={{
        uri:
          "https://assets.fxnetworks.com/cms/prod/shows/the-simpsons/photos/simpsons-sidebar/character-facts/Homer/swsb_character_fact_homer_288x763.png"
      }}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
});

export default ImageLoader;

这是我将其导入配置文件的方式：

import ImageLoader from "./HomerProfilePicture";
render() {
    return (
      <View style={styles.container}>
           <ImageLoader />
      </View>   
 );
  }
}