当您打开该特定屏幕时,我正在尝试使图像具有动画效果,但是(显然)它不起作用。它与状态有关(第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;