リアクションネイティブのスクロールでツールバーの高さをアニメ化

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> 

そして、次のように私はflatlistのonScroll小道具を使用しています：

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

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

これを試してみてください：

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