Interpolate 不是函数 react native

Question

我在 link https://www.youtube.com/watch?v=YE7c6ch2msY 关注视频并尝试这样做。但是当我添加动画插值时它显示错误“插值不是函数” 这是我的代码


    import * as React from 'react';
    import { StatusBar, Animated, Text, Image, View, StyleSheet, Dimensions, FlatList } from 'react-native';
    import { TouchableOpacity } from 'react-native-gesture-handler';
    const { width, height } = Dimensions.get('screen');

    const Indicator = ({ scrollX }) => {
      return (
        <View style={{ position: 'absolute', bottom: 100, flexDirection: 'row' }}>
          {DATA.map((_, i) => {
            const inputRange =[(i-1) * width, i* width, (i+1)* width];
            const scale = scrollX.interpolate({
              inputRange,
              outputRange:[0.8,1.4,0.8],
              extrapolate:'clamp',
            })
            return <View key={`indicatot-${i}`}
              style={{
                height: 10,
                width: 10,
                borderRadius: 5,
                backgroundColor: '#333',
                margin: 10
              }} />
          })}
        </View>
      )
    }

    export default function App() {
      const scrollX = React.useRef(new Animated.Value(0)).current;
      return (
        <View style={styles.container}>
          <StatusBar hidden />
          <Animated.FlatList
          ...
            renderItem={({ item }) => {
              return (
                ...
              )
            }}>

          </Animated.FlatList>
          <Indicator scrollX={{ scrollX }} />
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

我可以看到 scrollX 的类型是 any，不是 Animted.Value 我该如何解决？

Answer 1

这只是一个小错别字，您在传递 scrollX

时放了双括号

<Indicator scrollX={{ scrollX }} />

这意味着您要传递一个带有属性 scrollX 的对象，只需删除一组括号 scrollX={ scrollX }

Interpolate 不是函数 react native

Interpolate is not a function react native

javascript

react-native

react-native-android