在Animated.event上调用回调-反应本机动画

时间:2018-08-28 01:38:29

标签: react-native react-animated

因此,我有一个父组件和一个子组件,而子组件有一个ScrollView。我想通过子组件的滚动为父组件中的元素设置动画,但是动画值没有变化?这是我的代码:

const Child = ({ handleScroll }) => {
    return {
        <ScrollView
          style={styles.view}
          scrollEventThrottle={16},
          onScroll={handleScroll}
        >
        {/*
        list of items here
        */}
        </ScrollView>
    };
}

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            scrollY: (new Animated.Value(0)).interpolate({
                inputRange: [0, 1],
                outputRange: [200, 50],
                extrapolate: 'clamp'
            })
        };
        this.handleScroll = this.handleScroll.bind(this);
    }

    handleScroll(event) {
        return Animated.event([{
            nativeEvent: {
                contentOffset: {
                    y: this.state.scrollY
                }
            }
        }]);
    }

    render() {
        return (
            <Animated.Image
              style={[
                styles.imageStyle,
                height: this.state.scrollY
              ]}
            />
            <Child handleScroll={this.handleScroll} />
        );
    }
}

0 个答案:

没有答案