我正在开发一个应用程序。这个应用程序有一个显示 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"
}
});
正如您从上面的代码中看到的那样，我已经获得了不透明度。我不知道如何进行翻译，因为图标是插入到特定视图中的。