我正在尝试动画菜单徽标以便在单击时旋转。我在旋转时成功获得了旋转,但是在旋转时它直接转到0而不是通过旋转动画。
这是我的组成部分:
import React from 'react';
import { TouchableOpacity, Animated } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
const TabIcon = ({
route,
renderIcon,
onPress,
focused,
menuToggled,
activeTintColor,
inactiveTintColor,
}) => {
const isMenuLogo = route.params && route.params.navigationDisabled;
const animation = new Animated.Value(0);
Animated.timing(animation, {
toValue: menuToggled ? 1 : 0,
duration: 200,
useNativeDriver: true,
}).start();
const rotateInterpolate = animation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg'],
});
const animatedStyles = { transform: [{ rotate: rotateInterpolate }] };
const logoStyles = [animatedStyles, styles.logoStyle];
return (
<TouchableOpacity
style={styles.tabStyle}
onPress={onPress}
activeOpacity={isMenuLogo && 1}
>
<Animated.View style={isMenuLogo ? logoStyles : null}>
{
renderIcon({
route,
focused,
tintColor: focused
? activeTintColor
: inactiveTintColor,
})
}
</Animated.View>
</TouchableOpacity>
);
};
TabIcon.propTypes = {
route: PropTypes.shape({
key: PropTypes.string,
}).isRequired,
renderIcon: PropTypes.func.isRequired,
onPress: PropTypes.func,
focused: PropTypes.bool,
menuToggled: PropTypes.bool,
activeTintColor: PropTypes.string.isRequired,
inactiveTintColor: PropTypes.string.isRequired,
};
TabIcon.defaultProps = {
onPress: () => {},
focused: false,
menuToggled: false,
};
export default TabIcon;
我先检查它是否在实际旋转之前切换过来。此组件在另一个显示自定义底部选项卡导航的父组件中调用。
当它向下旋转或我在当前动画中缺少配置时,我应该为它做一个不同的动画吗?
任何帮助和建议将非常感谢。谢谢。
我认为这个问题与以下事实有关:当你设置animation
的初始值因为它始终设置为0
时,它不会反映切换菜单时的更改。
你需要改变:
const animation = new Animated.Value(0);
至
const animation = new Animated.Value(menuToggled ? 0 : 1);
虽然做出这种改变会导致不同的问题。因为menuToggled
影响动画的开始和结束位置,所以Icon现在将从结束位置旋转到正确的起始位置。这不太理想。
但是我们可以通过为menuToggled
设置默认值null来解决这个问题。然后将动画包装在if-statement
中,只有当menuToggled
不是null
时才会运行。
以下是基于初始代码的示例:
import React from 'react';
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
const TabIcon = ({
onPress,
menuToggled
}) => {
const logoStyles = [styles.logoStyle];
if (menuToggled !== null) {
const animation = new Animated.Value(menuToggled ? 0 : 1);
Animated.timing(animation, {
toValue: menuToggled ? 1 : 0,
duration: 200,
useNativeDriver: true
}).start();
const rotateInterpolate = animation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg']
});
const animatedStyles = { transform: [{ rotate: rotateInterpolate }] };
logoStyles.push(animatedStyles);
}
return (
<TouchableOpacity
style={styles.tabStyle}
onPress={onPress}
>
<Animated.View style={logoStyles}>
<Ionicons name="md-checkmark-circle" size={32} color="green" />
</Animated.View>
</TouchableOpacity>
);
};
export default class App extends React.Component {
state = {
menuToggled: null
}
toggleMenu = () => {
this.setState(prevState => {
return { menuToggled: !prevState.menuToggled };
});
}
render () {
return (
<View style={styles.container}>
<TabIcon
onPress={this.toggleMenu}
menuToggled={this.state.menuToggled}
/>
</View>
);
}
}
我删除了你的TabIcon
组件,因为那里有很多与动画无关的东西。您应该能够轻松地将我所做的工作融入您自己的组件中。 https://snack.expo.io/@andypandy/rotating-icon
我已经尝试过上面的安德鲁解决方案并且它有效,但我选择将其转换为类组件。它的工作方式相同。请参阅下面的组件。
import React, { PureComponent } from 'react';
import { TouchableOpacity, Animated } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
class TabIcon extends PureComponent {
constructor(props) {
super(props);
this.state = {
animation: new Animated.Value(0),
};
}
render() {
const { animation } = this.state;
const {
route,
renderIcon,
onPress,
focused,
menuToggled,
activeTintColor,
inactiveTintColor,
} = this.props;
const isMenuLogo = route.params && route.params.navigationDisabled;
Animated.timing(animation, {
toValue: menuToggled ? 1 : 0,
duration: 200,
useNativeDriver: true,
}).start();
const rotateInterpolate = animation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg'],
});
const animatedStyles = { transform: [{ rotate: rotateInterpolate }] };
const logoStyles = [animatedStyles, styles.logoStyle];
return (
<TouchableOpacity
style={styles.tabStyle}
onPress={onPress}
activeOpacity={isMenuLogo && 1}
>
<Animated.View style={isMenuLogo ? logoStyles : null}>
{
renderIcon({
route,
focused,
tintColor: focused
? activeTintColor
: inactiveTintColor,
})
}
</Animated.View>
</TouchableOpacity>
);
}
}
TabIcon.propTypes = {
route: PropTypes.shape({
key: PropTypes.string,
}).isRequired,
renderIcon: PropTypes.func.isRequired,
onPress: PropTypes.func,
focused: PropTypes.bool,
menuToggled: PropTypes.bool,
activeTintColor: PropTypes.string.isRequired,
inactiveTintColor: PropTypes.string.isRequired,
};
TabIcon.defaultProps = {
onPress: () => {},
focused: false,
menuToggled: false,
};
export default TabIcon;