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

129

Kaizen Tamashi

我正在尝试对标题后退按钮的颜色进行动画处理，以从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}
        >

丹尼

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。