2

我需要你对 React native 动画的帮助。在我的屏幕上，我想在向上滚动时将导航标题的不透明度从 0 更改为 1。

这是Snack中的代码

我像这样在 HomeScreen 中声明动画值。

在 Homescreen.js 中

export const translationY = new Value(0)

为什么我使用“导出”是在导航标题中使用动画值

在 HomeStackNavigator.js 文件中

import {translationY} from './HomeScreen';

const forFade = () => {
  const opacity = interpolate(translationY, {
    inputRange: [
      0,
      BUTTON_CONTAINER_HEIGHT - 100,
      height - getStatusBarHeight(),
    ],
    outputRange: [0, 1, 1],
    extrapolate: Extrapolate.CLAMP,
  });
  return {
    backgroundStyle: {opacity},
  };
};

export function HomeStack() {
  return (
    <Stack.Navigator initialRouteName="Intro" headerMode="screen">
      <Stack.Screen name="Intro" component={IntroScreen} />
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerStyleInterpolator: forFade,
        }}
      />
    </Stack.Navigator>
  );
}

HomeScreen 中的另一个动画有效。但是动画在导航标题中不起作用。我怎样才能做到这一点？我错过了什么？导出动画值（translationY）有问题吗？

4

0 回答 0