Question

我有一张背景图片，我想越来越模糊。
到目前为止，模糊效果很好：

export default class Example extends Component {

  state = { blurState: 1 };

  componentWillMount = () => {
    this.getRandomBlurIntervals();
  }

  getRandomBlurIntervals = () => {
    var blurState = this.state.blurState;
    setInterval(() => {
      blurState = blurState + Math.random();
      this.setState({blurState});
    }, 2000);
  }

  render() {
    return (
      <ImageBackground source={require('../images/awesomeImage.jpg')}
        blurRadius = {this.state.blurState}
        style={styles.backgroundImage}>
          <Text >Some awesome text</Text>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: null,
    height: null
  }
});

我的问题是，当从模糊状态更改为下一个状态时，屏幕会亮一会儿，就像重新加载页面一样。我不需要从一个模糊状态到另一个模糊状态的超平滑过渡，但我想摆脱这些白色闪光屏幕。是否有任何有助于避免它们的设置？

（我不知道react-native-blur是否会更好地解决这个问题，但我目前正在使用世博会，所以我不能使用那个。）

React native：在模糊效果之前避免屏幕亮起

0 个答案: