Анимировать прозрачность заголовка навигации при прокрутке в ScrollView в React Native? - PullRequest
Новая
       48

Анимировать прозрачность заголовка навигации при прокрутке в ScrollView в React Native?

0 голосов
/ 06 марта 2020

Мне нужна ваша помощь для анимации в React native. На моем экране я хочу изменить непрозрачность заголовка навигации от 0 до 1.

Вот код в Закуска

Я объявляю анимированное значение в HomeScreen как this.

На главном экране. js

export const translationY = new Value(0)

Почему я использую 'export', это использование анимированного значения в заголовке навигации

В HomeStackNavigator. js file 

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)?

...