在React-Native中滚动动画工具栏高程

Question

I am trying to animate toolbar elevation on scroll of a flatlist, But I keep getting a Warning: Failed prop type: Invalid prop style.container of type object supplied to Toolbar, expected number . I am using Toolbar component from react-native-material-ui . I am using Animated API for the animation.

Code Snippet:

state = {
    scrollY: new Animated.Value(0)
};

render() {
        const elevate = this.state.scrollY.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 7],
            extrapolate: 'clamp'
        });

        return (
            <ThemeProvider uiTheme={uiTheme}>
                <View style={styles.contentWrapper}>
                    <CustomStatusBar themeColor={uiTheme.palette.primaryColor} elevation={elevate}/>
                    <View>
                        <Toolbar
                            leftElement="menu"
                            centerElement="Aloha"
                            searchable={{
                                autoFocus: true,
                                placeholder: 'Search your chats',
                            }}
                            onLeftElementPress={() => this.props.navigation.navigate('DrawerOpen')}
                            style={{container: {elevation: elevate}}}
                        />
                    </View>

And I am using the onScroll prop of flatlist as follows:

onScroll={Animated.event(
    [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}

OUTPUT IN CONSOLE

e {_children: Array(0), _parent: e, _config: {…}, _interpolation: ƒ}
_children
:
(2) [e, e]
_config
:
{inputRange: Array(2), outputRange: Array(2), extrapolate: "clamp"}
_interpolation
:
ƒ (t)
_parent
:
e {_children: Array(1), _value: 0, _startingValue: 0, _offset: 0, _animation: null, …}
__proto__
:
t

Answer 1

Try this:

constructor(props) {
    super(props);
    this.elevation = new Animated.Value(0);
    this.state = {
     scrollY: new Animated.Value(0)
  };
}

changeElevation = () => {
    var elevation = 7;
    if (this.state.scrollY === 0) elevation = 0;
    Animated
        .timing(this.elevation, {
        toValue: elevation,
        duration: ANIMATION_DURATION //could be 200
    })
        .start();
}