如何在 React Native React Navigation 5 中为标题后退按钮的颜色设置动画？答案

【问题标题】：How to Animate Color of Header Back Button in React Native React Navigation 5?如何在 React Native React Navigation 5 中为标题后退按钮的颜色设置动画？
【发布时间】：2020-08-29 07:39:39
【问题描述】：

我正在尝试将标题后退按钮的颜色从带有白色箭头图标的灰色背景设置为带有黑色箭头图标的白色背景，以响应本机反应导航 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}
        >

【问题讨论】：

Icon组件从何而来？
您将背景颜色设置为 backButtonOpacity，这似乎是错误的，因为不透明度和颜色不一样。
当您在样式 color:backArrowColorAnimation 中设置颜色时，这似乎是错误的，您应该在上设置颜色

标签： react-native react-navigation-v5

【解决方案1】：

问题似乎是 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

【讨论】：

【解决方案2】：

我猜使用useNativeDriver: true 进行插值会解决问题。

但我没有尝试过。 Please check the header animated view example here. 如果对您没有帮助，请也分享您的图标组件。

【讨论】：

嗨，我尝试将`useNativeDriver`设置为true，不幸的是它并没有解决问题。图标是import {Icon} from 'react-native-elements';
这不起作用，因为无法使用本机驱动程序对颜色进行动画处理

【解决方案3】：

如果你只想改变背景颜色和箭头图标颜色，那为什么需要Animated.View呢？

您可以简单地使用 navigation.setParams() 来更改标题左侧和箭头图标的颜色。

setParams 将像 setState 一样更新路由参数。

【讨论】：

他正在使用 animated.view ，因为他想为颜色变化设置动画。使用 set params 只会立即改变它。