我正在使用react native将动画添加到我的登录屏幕。我确实在纱线上添加了react-native-svg并导入了SVG，然后从react-native-svg中导入了Image，然后不得不从react-native导入中删除了Image。我用SVG包装了Image容器，但现在没有加载图像。有关如何解决的任何想法？本质上，我正在尝试对背景图像进行动画处理，以使其底部弯曲。

import React from 'react';
import {
    View,Text,Dimensions,StyleSheet,TouchableOpacity,Alert,[![enter image description here][1]][1]
    TextInput
  } from 'react-native';
import Svg,{ Image,Circle,ClipPath } from 'react-native-svg';
import Animated,{ Easing } from 'react-native-reanimated';
import { TapGestureHandler,State } from 'react-native-gesture-handler';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { Tab,Tabs,Header } from 'native-base';
import { commonStyles } from './styles/styles';
import { FontAwesome as Icon } from '@expo/vector-icons';
import FBSDK,{ Loginmanager } from 'react-native-fbsdk';
import { ifIphoneX } from 'react-native-iphone-x-helper';
import firebase from 'firebase';
import { AppAuth } from 'expo';
import { Google } from 'expo';
import InputText from '../Components/InputText';
import image from '../assets/Images/logo_02_four_color.png';
import { connect } from 'react-redux';
import { bindactionCreators } from 'redux';
import Footer from '../Components/Footer';
import * as useractions from '../reducers/user/actions';

import {
    EMAIL_REGIX,//What is this EMAIL_REGIX?
    EMAIL_ALERT,PASSWORD_ALERT,PASSWORD_MESSAGE,FB_ALERT,accOUNT,FORGOT,SIGNUP
} from '../utils/constants';
// import SignInScreen from './SignInScreen';
// import SignUp from './SignUp';

const { width,height } = Dimensions.get('window');
const { Value,event,block,cond,eq,set,Clock,startClock,stopClock,debug,timing,clockRunning,interpolate,Extrapolate,concat } = Animated;

function runTiming(clock,value,dest) {
  const state = {
    finished: new Value(0),position: new Value(0),time: new Value(0),frameTime: new Value(0)
  };

  const config = {
    duration: 1000,toValue: new Value(0),easing: Easing.inOut(Easing.ease)
  };

  return block([
    cond(clockRunning(clock),[
      set(state.finished,0),set(state.time,set(state.position,value),set(state.frameTime,set(config.toValue,dest),startClock(clock)
    ]),timing(clock,state,config),cond(state.finished,debug('stop clock',stopClock(clock))),state.position
  ]);
}

class LoginScreen extends React.Component {

  constructor(props) {
      super(props);
      // this.spinValue = new Animated.Value(0);
      // this.state = {
      //     email: '',//     password: ''
      // };

      this.buttonOpacity = new Value(1);
      this.onStateChange = event([
        {
        nativeEvent: ({ state }) =>
        block([cond(eq(state,State.END),set(this.buttonOpacity,runTiming(new Clock(),1,0))
        )
      ])
      }
  ]);

  this.onCloseState = event([
    {
    nativeEvent: ({ state }) =>
    block([cond(eq(state,1))
    )
  ])
  }
]);


    this.buttonY = interpolate(this.buttonOpacity,{
    inputRange: [0,1],outputRange: [100,0],extrapolate: Extrapolate.CLAMP
    });


    this.bgY = interpolate(this.buttonOpacity,outputRange: [-height / 3,extrapolate: Extrapolate.CLAMP
    });

    this.textInputZIndex = interpolate(this.buttonOpacity,{
      inputRange: [0,outputRange: [1,-1],extrapolate: Extrapolate.CLAMP
    });

    this.textInputY = interpolate(this.buttonOpacity,extrapolate: Extrapolate.CLAMP
    });
    this.textInputOpacity = interpolate(this.buttonOpacity,extrapolate: Extrapolate.CLAMP
    });
    this.rotateCross = interpolate(this.buttonOpacity,outputRange: [180,360],extrapolate: Extrapolate.CLAMP
    });
  }

render() {
  console.log(this.buttonY,'-----******');
  const {
      navigation: { navigate }
  } = this.props;

  return (
      <View style={styles.container}>
        <Animated.View
        style={{ ...StyleSheet.absoluteFill,transform: [{ translateY: this.bgY }] }}
        >
        <Svg height={height} width={width}>
        <Image
          href={require('../assets/Images/TemplatePic.jpg')}
          width={width}
          height={height}
        />
        </Svg>
        </Animated.View>
        <View style={{ height: height / 3 }} />
        <TouchableOpacity>
          <TapGestureHandler onHandlerStateChange={this.onStateChange} >
          <Animated.View
          style={[

            styles.signupbutton,commonStyles.alignSelfcenter,{
              opacity: this.buttonOpacity,transform: [{ translateY: this.buttonY }],width: width * 0.73
            }

          ]}
          >
            <Text style={[styles.signuptextbutton]}>Sign Up</Text>
          </Animated.View>
          </TapGestureHandler>
          </TouchableOpacity>
          <TouchableOpacity>
          <Animated.View
            style={[
              styles.loginbutton,{
                opacity: this.buttonOpacity,width: width * 0.73
              }
            ]}
          >
            <Text style={[styles.logintextbutton]}>Log In</Text>
          </Animated.View>
        </TouchableOpacity>
        <Animated.View
          style={{
            zIndex: this.textInputZindex,opacity: this.textInputOpacity,transform: [{ translateY: this.textInputY }],height: height / 3,...StyleSheet.absoluteFill,top: null,justifyContent: 'center' }}
        >
        <TapGestureHandler onHandlerStateChange={this.onCloseState}>
          <Animated.View style={styles.closeButton}>
            <Animated.Text
              style={{ fontSize: 15,transform: [{ rotate: concat(this.rotateCross,'deg') }]
            }}
            >
            X
            </Animated.Text>
          </Animated.View>
        </TapGestureHandler>
        <TextInput
        style={styles.inputText}
        icon="email"
        placeholder="Email"
        autoCapitalize="none"
        //value={this.state.email}
        //onChangeText={email => this.setState({ email })}
        />
        <TextInput
        style={styles.inputText}
        icon="lock"
        placeholder="Password"
        autoCapitalize="none"
        //value={this.state.password}
        //onChangeText={password => this.setState({ password })}
        secureTextEntry
        />
        <Animated.View style={styles.button}>
          <Text style={{ fontSize: 20,fontWeight: 'bold' }}>
          SignUp
          </Text>
        </Animated.View>
          </Animated.View>

      </View>

  );
}
}

const styles = StyleSheet.create({
  container: {
    width: '100%',flex: 1,justifyContent: 'center'
  },loginbutton: {
    height: 60,backgroundColor: '#FFFFFF',borderRadius: 20,shadowColor: '#000',shadowOffset: { width: 0,height: 2 },shadowOpacity: 0.5,shadowRadius: 5,alignItems: 'center',justifyContent: 'center',elevation: 20,marginBottom: 10
  },signupbutton: {
    height: 60,backgroundColor: 'rgb(72,244,255)',logintextbutton: {
    fontSize: 16,textAlign: 'center',color: 'black',fontFamily: 'Helvetica-Bold'
  },signuptextbutton: {
    fontSize: 16,color: 'white',button: {
    backgroundColor: 'white',height: 70,marginHorizontal: 20,borderRadius: 35,marginVertical: 5,shadowOffset: { width: 2,shadowOpacity: 0.2,shadowColor: 'black'
  },closeButton: {
    height: 40,width: 40,backgroundColor: 'white',position: 'absolute',top: -20,left: ((width / 2) - 20),inputText: {
    height: 50,borderRadius: 25,borderWidth: 0.5,marginLeft: 20,marginRight: 20,paddingLeft: 10,marginTop: 5,borderColor: 'rgba(0,0.2)',},});

export default LoginScreen;