reactjs - react-native 使状态栏 'barStyle' 可动画化

Question

我正在尝试使状态栏的 barStyle 动画化，这样当我滚动时，我可以将 barStyle 类型从 'dark-content' 更改为 'light-content' .

首先，我制作了我的状态栏动画:

const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar);

其次，设置动画值:

scroll = new Animated.Value(0);

  tabY = this.nScroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT],
    outputRange: [0, 0, 1]
  });
  headerBg = this.scroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT],
    outputRange: ["black", 'white'],
    extrapolate: "clamp"
  });

最后，如果 this.HeaderBg 已更改，请更改 barStyle:

<AnimatedStatusBar barStyle={this.headerBg === 'transparent'? 'dark-content' : 'light-content'} translucent={true} /> 

我觉得我的代码应该可以工作，但它并没有像我预期的那样工作。

知道如何在动画更改时更改 statusBar 的 barStyle 的类型吗？

顺便说一句，我没有使用钩子(Hook)。我想知道如何使用类组件来做到这一点。

Answer 1

我们只能通过使用变量来为状态栏设置动画。(通过切换)

让我们以dark作为变量。

state = {
  dark: true,
};

最初，这是真的。所以状态栏样式应该是深色的。

<StatusBar
    barStyle={dark ? 'dark-content' : 'light-content'}
    translucent
    backgroundColor="transparent"
/>

切换是在滚动方法内部完成的。这里我使用 100 作为偏移量。

onScroll = ({nativeEvent}) => {
  let y = nativeEvent.contentOffset.y;
  this.scroll.setValue(y); // set scroll animation value here
  const {dark} = this.state;
  let scrollValue = y;
  if (scrollValue > 100 && dark) {
    this.setState({dark: false});
  }
  if (scrollValue < 100 && !dark) {
    this.setState({dark: true});
  }
};

---

示例代码

import React, {Component} from 'react';
import {
  View,
  StatusBar,
  StyleSheet,
  ScrollView,
  Dimensions,
  Animated,
} from 'react-native';
const {height} = Dimensions.get('window');

export default class Home extends Component {
  scroll = new Animated.Value(0);
  state = {
    dark: true,
  };
  onScroll = ({nativeEvent}) => {
    let y = nativeEvent.contentOffset.y;
    this.scroll.setValue(y); // set scroll animation value here
    const {dark} = this.state;
    let scrollValue = y;
    if (scrollValue > 100 && dark) {
      this.setState({dark: false});
    }
    if (scrollValue < 100 && !dark) {
      this.setState({dark: true});
    }
  };
  render() {
    const {dark} = this.state;
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle={dark ? 'dark-content' : 'light-content'}
          translucent
          backgroundColor="transparent"
        />
        <ScrollView
          style={styles.ScrollView}
          contentContainerStyle={styles.scrollContainer}
          onScroll={this.onScroll}>
          <View style={styles.item} />
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ScrollView: {
    flex: 1,
  },
  scrollContainer: {
    height: height * 2,
    backgroundColor: '#000',
  },
  item: {
    height: 100,
    backgroundColor: '#fff',
  },
});