Реактивная строка состояния анимации - PullRequest
1 голос
/ 21 апреля 2020

Изначально у меня черный фон с light-content barStyle, но при прокрутке вверх цвет фона меняется на белый, и я хочу изменить statusBar barStyle на 'dark-content'.

Это почему я пытаюсь сделать мой статусBar анимированным.

Пока я пробовал вот так:

  1. Я сделал анимированный компонент statusBar

    const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar)

  2. набор Анимированный диапазон ввода / вывода

    scroll = new Animated.Value(0)

    statusBarColor = this.scroll.interpolate({ inputRange: [0, SCROLL_HEIGHT], outputRange: ['white', 'black'], extrapolate: "clamp" })

  3. условно изменить стиль барреля.

    <AnimatedStatusBar backgroundColor='white' barStyle={this.statusBarColor ==='white'? 'light-content':'dark-content'} />

Однако это не работает. Как я мог сделать StatusBar анимированным, чтобы я мог изменить barStyle при прокрутке вверх.

1 Ответ

2 голосов
/ 21 апреля 2020

enter image description here

iOS

  1. Я изменил <StatusBar/> реквизиты translucent на true
  2. animated пропустить в <StatusBar/> в true
  3. получить высоту строки состояния от верхнего значения useSafeArea hook
  4. Создать простое Animated.View, имеющее 100% width и строку состояния height

Android

  1. Создать AnimatedStatusBar с Animated.createAnimatedComponent(StatusBar);

Другие шаги такие же

import { useSafeArea } from 'react-native-safe-area-context';

const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar);
function Page() {
  const { top: safeAreaTop } = useSafeArea();
  const barColorAnim = useRef(new Animated.Value(0)).current;
  const barColor = barColorAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['black', 'white'],
  });
  const [barStyle, setBarStyle] = useState('light-content');

  const toggle = () => {
    setBarStyle((style) =>
      style === 'light-content' ? 'dark-content' : 'light-content',
    );
    Animated.timing(barColorAnim, {
      useNativeDriver: false,
      duration: 300,
      toValue: barStyle === 'light-content' ? 1 : 0,
    }).start();
  };

  return (
    <Container>
      <Animated.View
        style={{
          width: '100%',
          height: safeAreaTop,
          backgroundColor: barColor,
        }}
      />
      <AnimatedStatusBar
        animated={true}
        backgroundColor={barColor}
        barStyle={barStyle}
        translucent={true}
      />
      <Button title="Toggle" onPress={toggle} />
    </Container>
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...