如何在React Native React导航5中动画化标题后退按钮的颜色？
如何在React Native React导航5中动画化标题后退按钮的颜色？
提问于 2020-08-29 15:39:39
我正在尝试在react本地react导航5中将标题后退按钮的颜色从带白色箭头图标的灰色背景到带黑色箭头图标的彩色背景。
我尝试执行以下操作，但它抛出了RangeError: Maximum call stack size exceeded.
const yOffset = useRef(new Animated.Value(0)).current;
const backButtonBackgroundColorAnimation = yOffset.interpolate({
inputRange: [0, 130],
outputRange: ['rgba(0,0,0,0.4)', 'rgba(0,0,0,0)'], // gray transparent to transparent
extrapolate: "clamp"
});
const backArrowColorAnimation = yOffset.interpolate({
inputRange: [0, 130],
outputRange: ['rgb(255,255,255)', 'rgb(0,0,0)'], // white to black
extrapolate: "clamp"
});import {Icon} from 'react-native-elements';
headerLeft: (props) => (
<Animated.View style={{backgroundColor: backButtonOpacity}} >
<Icon
name='arrowleft'
type='antdesign'
color='white'
size={24}
containerStyle={{ backgroundColor:backButtonBackgroundColorAnimation, color:backArrowColorAnimation, borderRadius:500, padding: 5, marginLeft:10}}
{...props}
onPress={() => {
navigation.goBack();
}}
/>
</Animated.View>
)<Animated.ScrollView
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {
y: yOffset,
},
},
},
],
{ useNativeDriver: false }
)}
scrollEventThrottle={16}
>回答 3
Stack Overflow用户
回答已采纳
发布于 2020-08-31 23:00:49
问题似乎是react-native-elements图标不是一个动画组件。您可以使用以下命令使其成为动画
import { Icon } from 'react-native-elements';
import { Animated } from 'react-native';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);还要调整它，以便使用样式而不是容器样式。
headerLeft: (props) => (
<Animated.View style={{ opacity: headerOpacity }}>
<AnimatedIcon
name="arrowleft"
type="antdesign"
color={backArrowColorAnimation}
size={24}
style={{
backgroundColor: backButtonBackgroundColorAnimation,
borderRadius: 500,
padding: 5,
marginLeft: 10,
}}
{...props}
onPress={() => {
navigation.goBack();
}}
/>
</Animated.View>
),有关完整的代码示例，请参阅此零食https://snack.expo.io/@dannyhw/react-navigation-animated-header2上的代码
Stack Overflow用户
发布于 2020-08-30 05:37:15
我想使用useNativeDriver: true进行插值可以解决这个问题。
但我没有试过。Please check the header animated view example here.如果对你没有帮助，请也分享你的图标组件。
Stack Overflow用户
发布于 2020-08-30 01:58:57
如果你只想改变背景颜色和箭头图标的颜色，那么你为什么需要Animated.View？
您可以简单地使用navigation.setParams()来更改标题左侧和错误图标的颜色。
在更新路由参数时，setParams将像setState一样工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63644630
复制相关文章
相似问题
腾讯云开发者
