react-native - React Native Expo Animated _reactNative.Animated.interpolate 不是函数

问题描述

尝试为视图的标题设置动画时出现此错误。TypeError：_reactNative.Animated.interpolate 不是函数

我尝试使用 react-native HOOKS 遵循本教程https://www.youtube.com/watch?v=JPx8IlfYQ-c，我也尝试使用 react-native-reanimated 没有成功。我正在使用带有 react 16.8.3 的 expo sdk 35.0.0 并尝试使用 react-native-reanaimeted: 1.7.0 但在此示例中，我直接从 react-native 导入了 import {Animated} from 'react-native'

import React, {useState, useEffect} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    Animated,
    TouchableWithoutFeedback
} from 'react-native';

const HEADER__HEIGHT = 70
const KitCardItem = ({student, onPressCard, insertItemDialogVisible, setinsertItemDialogVisible}) => {
    const {date, items} = student || {};
    const [itemsVisible, setItemsVisible] = useState(true)

    const scrollY = new Animated.Value(0)
    const headerY = Animated.interpolate(scrollY, {
        inputRange: [0, HEADER__HEIGHT],
        outputRange: [0, -HEADER__HEIGHT],

    })  

    return (    
        <View style={{height: '100%', justifyContent: 'center'}}>   
            <Animated.View style={{
                height: HEADER__HEIGHT,
                transform: [{translateY: headerY}]
            }}>
                <View
                    style={{width: '100%', alignItems: 'center'}}>
                    <Text style={{fontWeight: '700', fontSize: 16, fontcolor: titleColor}}>{getDateTitle()}</Text>
                </View>
            </Animated.View>


            <View style={{flex: 1,}}>
                <Animated.FlatList
                    scrollEventThrottle={16}
                    onScroll={ Animated.event([
                        {
                            nativeEvent: {contentOffset: {y: scrollY}}
                        }
                    ])}
                    listKey={(item, index) => item._id}
                    showsHorizontalScrollIndicator={false}
                    vertical
                    style={{flex: 1,}}
                    data={items}
                    renderItem={({item, index}) => renderItem(item, index)}/>

            </View>


            {items.length === 0 &&
            <View style={emptyContainer}>
                <EmptyState

                    message={'Ainda sem notas para esse dia.'}
                />
            </View>                }


        </View>    
    )  
}

const styles = StyleSheet.create({});


export default KitCardItem

标签： react-nativeanimationhookexpo

react-native - React Native Expo Animated _reactNative.Animated.interpolate 不是函数

问题描述

解决方案

推荐阅读