Question

我想为ScrollView的backgroundColor设置动画，但总是会收到警告 - 以及一个非动画的ScrollView。我打错了吗？或者ScrollView根本不支持它？（它适用于常规视图。）我在iOS iPhone上测试使用Expo。

相关代码段：

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

getCurrentColorOfBackground（）方法：

  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）

坏对象：{“flexGrow”：1，“alignItems”：“center”，
  “justifyContent”：“center”，“backgroundColor”：“rgba（0,170,255，   1）“}       在ScrollView中（在createAnimatedComponent.js：154）

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

Answer 1

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

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

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

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

希望这有帮助。

Answer 2

您无法为滚动视图的contentContainerStyle的任何属性设置动画，因为基础组件ScrollContentContainerViewClass是由react-native硬编码的，无法更改。在此处查看源代码： https://github.com/facebook/react-native/blob/bbb6a0754ce4173e24d3c0b46a5350ff2a8690d3/Libraries/Components/ScrollView/ScrollView.js#L790-L802

您需要打开一个问题，然后提交一个拉取请求，向scrollView添加一个属性，该属性允许您设置ScrollContentContainerViewClass。

如何在React Native中为ScrollView的backgroundColor设置动画

2 个答案: