onScroll 不是 useNatveDriver 和 ScrollView 的函数错误

Question

我想在我的应用程序中添加可折叠标题。我为标题视图创建了一个单独的组件。

interface Props{
    userData: UserDetails | null
    scrollY: Animated.Value
}
    
const HEADER_EXPANDED_HEIGHT = sizeProportionHeight(320)
const HEADER_COLLAPSED_HEIGHT = sizeProportionHeight(142)

const CollapsableHeader : React.FC<Props> = ({userData, scrollY}) => {
    
   const headerHeight = scrollY.interpolate({
        inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
        outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
        extrapolate: 'clamp'
    })

    return(
        <Animated.View style={{height: headerHeight, width: SCREEN_WIDTH, position:'absolute', top:0, left: 0}}/>
    )
}

export default CollapsableHeader

我的主页我添加了标题，如下所示：

interface Props{
    navigation: StackNavigationProp<MainParamList,'HomeScreen'>
    route: RouteProp<MainParamList,'HomeScreen'>
}

interface HeaderState {
    scrollY: Animated.Value   
}

interface HomeScreenState {
    header: HeaderState
}

const HomeScreen : React.FC<Props> = ({ navigation, route }) => {

    const [state, setState] = React.useState<HomeScreenState>({header: {scrollY: new Animated.Value(0)}})

    return (
        <View  style={styles.container}>
            <CollapsableHeader userData={null} 
                               scrollY={state.header.scrollY}/>
            <ScrollView contentContainerStyle={[styles.scrollContainer]}
                        onScroll={Animated.event(
                            [{
                                nativeEvent: {
                                    contentOffset: {
                                        y: state.header.scrollY
                                    }
                                    
                                },
                            }],
                            {
                                useNativeDriver:true
                            }
                            
                        )}
                        scrollEventThrottle={16}>
/// Scrollable content
                </ScrollView>
            </View>
        )
    }

但是，如果我尝试滚动，则会收到错误消息

this.props.onScroll is not a function. (In 'this.props.onScroll(e)', 'this.props.onScroll' is an instance of AnimatedEvent)

如果我删除该useNativeDriver: true错误，该错误就会消失，但我会收到一条警告，指出我丢失了useNativeDriver.

如何正确使用这个可折叠动画？

Answer 1

使用nativeDriver意味着我们可以在动画开始之前将有关动画的所有内容发送到本机，并允许本机代码在 UI 线程上执行动画，而无需在每一帧上通过桥。

Native Animated 当前并不支持您可以使用 Animated 执行的所有操作。主要限制是您只能对非布局属性进行动画处理，例如transform和opacity等属性可以工作，但 Flexbox 和位置属性则不行。

因此，正如您所看到的width，并且height不受支持nativeDriver，您可以禁用它。

useNativeDriver: false

无需将其完全删除。

注意：也更改ScrollView为Animated.ScrollView：