javascript - 在 React-Native 中滚动时动画工具栏提升

Question

我正在尝试在平面列表的滚动上为工具栏高度设置动画，但我不断得到一个Warning: Failed prop type: Invalid prop style.container of type object supplied to Toolbar, expected number. 我正在使用来自react-native-material-ui 的Toolbar组件。我正在为动画使用 Animated API。

代码片段：

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>

我使用的onScroll道具flatlist如下：

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

控制台输出

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

尝试这个：

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();
}