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

Question

我正在尝试在平面列表的滚动上设置工具栏高程动画，但我不断获得Warning: Failed prop type: Invalid prop style.container of type object supplied to Toolbar, expected number。我正在使用react-native-material-ui中的工具栏组件。我正在为动画使用动画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的{​​{1}}道具如下：

flatlist

输入控制台

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

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