reactjs 在使用R-N动画环绕组件时,无法读取View & ScrollView的属性

vaj7vani  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(59)

我试图用我的代码实现某人的代码,在实现代码时,我得到了关于Animated.View和Animated.Scrollview的错误...我已经添加了react-native-animated库。你可以看到下面的代码...我观察到的一件事是,在react-native-animated中 Package 组件时,这个错误弹出...

错误:

TypeError:无法读取未定义的属性“ScrollView”
TypeError:无法读取未定义的属性'View'
基本上我正在制作一个叫做reveal on scrollview的模块
App.js

import React, { useRef, useEffect } from 'react';
import {StyleSheet, Text, View, ScrollView, } from "react-native";
import {
  Animated, useSharedValue, useAnimatedScrollHandler,
  useAnimatedStyle, withTiming, Easing, 
} from 'react-native-reanimated';

export default function App() {
  const translateY = useSharedValue(0);
  const lastContentOffset = useSharedValue(0);
  const isScrolling = useSharedValue(false);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      if (
        lastContentOffset.value > event.contentOffset.y &&
        isScrolling.value
      ) {
        console.log("checking scrllong up");
      } else if (
        lastContentOffset.value < event.contentOffset.y &&
        isScrolling.value
      ) {
        console.log("checking scroilling down");
      }
      lastContentOffset.value = event.contentOffset.y;
    },
    onBeginDrag: (e) => {
      isScrolling.value = true.valueOf;
    },
    onEndDrag: (e) => {
      isScrolling.value = false;
    }
  });

  return (
    <View style={styles.container}>
      <Animated.ScrollView style={styles.scrollView} onScroll={scrollHandler} >
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas
          like or deslike and comment me
        </Text>
      </Animated.ScrollView>
      <View style={styles.action}>
        <Text style={styles.actionItem}>Comment</Text>
        <Text style={styles.actionItem}>Like</Text>
        <Text style={styles.actionItem}>Dislike</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  scrollView: {
    marginHorizontal: 20,
  },
  text: {
    fontSize: 30,
  },
  action: {
    flexDirection: "row",
    borderWidth: 1,
    borderRadius: 25,
    padding: 15,
    position: "absolute",
    bottom: 5,
    backgroundColor: "#000",
    width: "50%",
    justifyContent: "space-around",
  },
  actionItem: {
    color: "#fff",
  },
});
1l5u6lss

1l5u6lss1#

您导入的Animated不正确。它应该是

import Animated, { useSharedValue, useAnimatedScrollHandler, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';

相关问题