如何在 React Native 中为 ScrollView 的 backgroundColor 设置动画 [英] How to animate the backgroundColor of a ScrollView in React Native

问题描述

我想为 ScrollView 的 backgroundColor 设置动画，但总是收到警告 - 和非动画 ScrollView.我遇到了错误吗?还是 ScrollView 根本不支持它?(它确实适用于常规视图.)我正在 iOS iPhone 上使用 Expo 进行测试.

I want to animate the backgroundColor of a ScrollView, but always get a warning - and a non-animating ScrollView. Am I hitting a bug? Or is it simply not supported on a ScrollView? (It does work on a regular View.) I'm testing using Expo on an iOS iPhone.

相关代码片段:

<Animated.ScrollView
  contentContainerStyle={[
    styles.container,
    this.getCurrentColorOfBackground()
  ]}>
  <Text onPress={this.onPress} style={styles.question}>
    {this.state.question}
  </Text>
</Animated.ScrollView>

getCurrentColorOfBackground() 方法:

the getCurrentColorOfBackground() method:

  getCurrentColorOfBackground = () => ({
    backgroundColor: this.backgroundColor.interpolate({
      inputRange: [0, 100],
      outputRange: ["#00aaFF", "#808080"]
    })
  });

动画本身:

this.backgroundColor = new Animated.Value(0);
Animated.timing(this.backgroundColor, {
  toValue: 100,
  duration: 1000 * 60
}).start();

警告信息:

20:17:58:警告:道具类型失败:道具无效 backgroundColor提供给 ScrollView: [object Object] 有效的颜色格式是- '#f0f' (#rgb)- '#f0fc' (#rgba)- '#ff00ff' (#rrggbb)- '#ff00ff00' (#rrggbbaa)- 'rgb(255, 255, 255)'- 'rgba(255, 255, 255, 1.0)'- 'hsl(360, 100%, 100%)'- 'hsla(360, 100%, 100%, 1.0)'- '透明'- '红色的'- 0xff00ff00 (0xrrggbbaa)

20:17:58: Warning: Failed prop type: Invalid prop backgroundColor supplied to ScrollView: [object Object] Valid color formats are - '#f0f' (#rgb) - '#f0fc' (#rgba) - '#ff00ff' (#rrggbb) - '#ff00ff00' (#rrggbbaa) - 'rgb(255, 255, 255)' - 'rgba(255, 255, 255, 1.0)' - 'hsl(360, 100%, 100%)' - 'hsla(360, 100%, 100%, 1.0)' - 'transparent' - 'red' - 0xff00ff00 (0xrrggbbaa)

坏对象:{ "flexGrow": 1, "alignItems": "center",
"justifyContent": "center", "backgroundColor": "rgba(0, 170, 255,1)" }在 ScrollView 中(在 createAnimatedComponent.js:154)

Bad object: { "flexGrow": 1, "alignItems": "center",
"justifyContent": "center", "backgroundColor": "rgba(0, 170, 255, 1)" } in ScrollView (at createAnimatedComponent.js:154)

如果你想自己尝试一下，完整的组件(和 repo)在这里:https://github.com/wim82/chapter-interview/blob/master/QuestionRotator.js

In case you want to try it out yourself, the full component (and repo) is here: https://github.com/wim82/chapter-interview/blob/master/QuestionRotator.js

推荐答案

在 style 属性中应用 backgroundColor 而不是 scrollView 的 contentContainerStyle.

Apply the backgroundColor inside the style property instead of contentContainerStyle of scrollView.

Animated.Value(0) 应该存储在状态中，而不是作为类对象(来自官方文档和最佳实践).

The Animated.Value(0) should be stored in the state, not as a class object (from the official docs and best practice).

我已经修改了您上面的代码以使其正常工作，

I have modified your above code to make it work,

import React, { Component } from 'react';
import { Text, StyleSheet, Animated } from 'react-native';

export default class App extends Component {


  constructor (props) {
    super(props);
    // Intialize to default value
    this.state = {
      backgroundColor: new Animated.Value(0)
    };
  }

  onPress = () => {
    // onPress, initialize to default value using setState and start animation
    // after the state has been updated
    this.setState({ backgroundColor: new Animated.Value(0) }, () => {
       Animated.timing(this.state.backgroundColor, {
        toValue: 100,
        duration: 5000
      }).start();
    });
  }


  render() {
    return (
      <Animated.ScrollView
        style={[
            styles.container,
            // Interpolation mapping from numbers to strings (colors)
            {
              backgroundColor: this.state.backgroundColor.interpolate({
                inputRange: [0, 100],
                outputRange: ["#00aaFF", "#808080"]
              })
            }
          ]}
      >
        <Text
          // onPress to start Animation
          onPress={() => this.onPress() }
          style={styles.paragraph}
        >
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url.
        </Text>
      </Animated.ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

工作零食示例:https://snack.expo.io/BymzMdtRG

希望这会有所帮助.

这篇关于如何在 React Native 中为 ScrollView 的 backgroundColor 设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！