React Native的Component文件夹中的图像动画

时间:2019-07-18 21:03:55

标签: react-native animation react-native-ios

当您打开该特定屏幕时,我正在尝试使图像具有动画效果,但是(显然)它不起作用。它与状态有关(第21行)。我只是想知道状态会在课程部分下进行。我对此可能是错的,但是我想知道是否有人可以看一下这个问题,看看在哪里我可能错了。我正在学习本机反应,我只是试图构建一个简单的应用程序,该应用程序包含由员工组成的目录。我想稍微说一下,然后在查看个人资料时使个人资料图片动起来

import React from "react";
import { Button, View, Text, StyleSheet, Image, Animated } from "react-native";
class BioScreen extends React.Component {
  static navigationOptions = {
    title: "Home",
    headerStyle: {
      backgroundColor: "#f4511e"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    },
    headerRight: (
      <Button
        onPress={() => alert("You have 9 matches today!")}
        title="INFO"
        color="fff"
      />
    ),
    state={
      opacity: new Animated.Value(0),
    },
    onLoad = () => {
      Animated.timing(this.state.opacity, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }).start();
    }
  };
      const App = () => (
        <View style={styles.container}>
          <Image
          style={{ width: 200, height: 200 }}
          source={{
            uri:
              "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2011/08/23/23827615-simpson_homer_headshot.jpg?v=1314140241"
          }}
        />
        </View>
      );
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Animated.Image
            onLoad={this.onLoad}
            {...this.props}
            style={[
              {
                scale: this.state.opacity.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.85, 1],
                })
              }
            ]}
        />
        <Text>Name: Christian Solis</Text>
        <Text>Hometown: Chicago, IL</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate("Home")}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
export default BioScreen;

0 个答案:

没有答案