Animated.View 未显示

Question

我一直在使用 Animated.View 来显示该视图的水平滑出效果，但是当我调用 function 时它不起作用，下面是我的代码：

   const [slideValue, setSlideValue] = useState(new Animated.Value(100));
      const [drawerShow, setDrawerShow] = useState(false);
      var isHidden = true;
    
     function _toggleSubview() {
        console.log('drawer,,,');
    
        // const state = isHidden == true ? false : true;
        // console.log('state', state);
        setDrawerShow(!isHidden ? true : false);
        // isHidden==true ? setDrawerShow(true) : setDrawerShow(false);
        console.log('is hidden', isHidden);
        console.log('set drawer shown', drawerShow);
        var toValue = 100;
    
        if (isHidden) {
          toValue = 0;
        }
    
        //This will animate the transalteY of the subview between 0 & 100 depending on its current state
        //100 comes from the style below, which is the height of the subview.
        Animated.spring(slideValue, {
          toValue: toValue,
          velocity: 3,
          tension: 2,
          friction: 8,
          useNativeDriver: true,
        }).start();
    
        isHidden = !isHidden;
      }
    
    return(
    <>
     <TouchableOpacity onPress={() => _toggleSubview()}>
                  <Icon name="bars" size={15} style={{padding: 10}} />
                </TouchableOpacity>
                {drawerShow == true && (
                  <Animated.View
                    style={[
                      styles.subView,
                      {transform: [{translateY: slideValue}]},
                    ]}>
                    <Text>This is a sub view</Text>
                  </Animated.View>
                )}
    
    </>
    ) 
const styles=StyleSheet.create({
 subView: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#FFFFFF',
    width: 100,
  }
)}

由于我最近一直在使用 Animations API 在这里遇到了错误，因此我们将不胜感激。