我正在开发一个应用程序。 这个程序有一个主屏幕，其中显示了6个图标。当我按图标时，反应导航器导航到新屏幕。 当我按下图标时，在过渡之前，它必须进行动画处理。 我不想将Transitioner用于先前的问题。 当我按下图标时，这是我的屏幕，我希望图标的不透明度变为0，并且它在屏幕的左上角移动（紧靠标题下方）。 但是我希望它能支持所有设备，而且我无法为所有人计算距离，平移，初始位置等，因此，我使用flexbox设计了它，而不是绝对位置。
我试图从动画视图的位置0开始，并根据屏幕到达计算出的位置，但是我再也无法管理代码了
export default class Home extends React.Component {
//tester.retrieveDataById()
constructor(props) {
super(props);
this.state = {
value: [
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) },
{ fadeAnim: new Animated.Value(1) }
]
};
}
static navigationOptions = {..}
_onPressButton = (info, icon, index) => {
Animated.parallel([
Animated.timing(
this.state.value[1].fadeAnim,
{
toValue: index === 1 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[0].fadeAnim,
{
toValue: index === 0 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[2].fadeAnim,
{
toValue: index === 2 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[3].fadeAnim,
{
toValue: index === 3 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[4].fadeAnim,
{
toValue: index === 4 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
),
Animated.timing(
this.state.value[5].fadeAnim,
{
toValue: index === 5 ? 1 : 0,
duration: 2000,
easing: Easing.ease,
useNativeDriver: true
}
)
]).start(() => {
console.log("dasd");
this.props.navigation.navigate(info, { icon: icon });
setTimeout(() => {
this.setState({
value: this.state.value.map(
element => (element.fadeAnim = { fadeAnim: new Animated.Value(1) })
) //restore the state when I come back from navigate
});
}, 500);
});
};
// the space in text is need for alignment among them
render() {
return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View style={styles.container}>
<View
style={{
flexDirection: "column",
justifyContent: "space-around"
}}
>
<Animated.View style={{ opacity: this.state.value[0].fadeAnim }}>
<TouchableOpacity
onPress={() => this._onPressButton("VenetoWelfare", Medal, 0)}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Medal
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
</TouchableOpacity>
<Text style={styles.text}>
text {"\n"} text {"\n"} text
</Text>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[1].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("WelfareCollettivo", Collective, 1)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Collective
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[2].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("AssistenzaSanitaria", Care, 2)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Care
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4),
transform: [{ translateY: -0 }]
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"} text
</Text>
</TouchableOpacity>
</Animated.View>
</View>
<View
style={{
flexDirection: "column",
justifyContent: "space-around"
}}
>
<Animated.View style={{ opacity: this.state.value[3].fadeAnim }}>
<TouchableOpacity
onPress={() => this._onPressButton("Previdenza", Analysis, 3)}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Wallet
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} {""}
{"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[4].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("PrevidenzaComplementare", Wallet, 4)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Wallet
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: this.state.value[5].fadeAnim }}>
<TouchableOpacity
onPress={() =>
this._onPressButton("WelfareAziendale", Industry, 5)
}
style={{ justifyContent: "center", alignItems: "center" }}
>
<Industry
width={`${normalize(50)}`}
height={`${normalize(50)}`}
fill="#7A9DBC"
style={{
justifyContent: "center",
alignItems: "center",
marginBottom: normalize(4)
}}
/>
<Text style={styles.text}>
text {"\n"} text {"\n"}{" "}
</Text>
</TouchableOpacity>
</Animated.View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
flexDirection: "row",
justifyContent: "space-around"
},
text: {
fontSize: normalize(18),
textAlign: "center",
color: "#7A9DBC"
}
});
从上面的代码可以看到，我已经获得了不透明度。 我不知道如何翻译，因为图标已插入特定视图中。