如何在 React Native React Navigation 5 中设置 Header 后退按钮的动画颜色？

Question

我正在尝试在 React Native React Navigation 5 中将 header 后退按钮的颜色从带白色箭头图标的灰色背景设置为带黑色箭头图标的白色背景。

我尝试执行以下操作，但它正在抛出 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}
        >

Answer 1

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

您只需使用 navigation.setParams() 即可更改 header 左箭头图标的颜色。

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

Answer 2

估计用useNativeDriver: true插值就可以解决问题

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

Answer 3

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

如何在 React Native React Navigation 5 中设置 Header 后退按钮的动画颜色？

How to Animate Color of Header Back Button in React Native React Navigation 5?

react-native

react-navigation-v5