(0, _reactNativeRedash.onScroll) не является функцией

Question

Я попытался интегрировать этот пример в свою базу кода (без TSX), но при попыткеonScroll={onScroll({ y })}. Я получаю следующую ошибку(0, _reactNativeRedash.onScroll) is not a function.

Я не уверен, в чем причина проблемы, так как я следовал примеру до буквы (только меняя его на обычный JS)

Всякий раз, когда я комментирую onScroll={onScroll({ y })} с участием console.log("y", y); и попробуйте зарегистрировать y ценность в ListBody компонент У меня утечка памяти (объем используемой памяти продолжает расти).

Все еще не уверен, почему происходит утечка памяти или что я делаю не так, чтобы вызвать ошибку.

Проблема: я получаю следующую ошибку(0, _reactNativeRedash.onScroll) is not a functionвсякий раз, когда компонент загружается ( закуска)

Что я пробовал: удалил все внутреннее содержимое scrollView, различные способы передачи реквизита, напримерy={y} или animV={y}, поиск решения в Интернете.

Чего я жду: y Значение для изменения с помощью прокрутки

 <Container>
      {/* <ListHeader {...{ y, album }} /> */}
      <ListBody {...{ y, album }} />
    </Container>

Здесь я создаю список и анимированное значение

import React from "react";
import styled from "styled-components";
import Animated from "react-native-reanimated";
import ListHeader from "./ListHeader";
import ListBody from "./ListBody";

const { Value } = Animated;

export default (TransitionList = ({ album }) => {
  const y = new Value(0);

  return (
    <Container>
      <ListHeader {...{ y, album }} />
      <ListBody {...{ y, album }} />
    </Container>
  );
});

const Container = styled.View`
  flex: 1;
  background-color: white;
`;

Заголовок

import React from "react";
import styled from "styled-components";
import Animated from "react-native-reanimated";
import { Image, StyleSheet } from "react-native";

import { MAX_HEADER_HEIGHT, HEADER_DELTA, BUTTON_HEIGHT } from "../../helpers";

const { interpolate, Extrapolate } = Animated;

export default (ListHeader = ({ album: { cover }, y }) => {
  const scale = interpolate(y, {
    inputRange: [-MAX_HEADER_HEIGHT, 0],
    outputRange: [4, 1],
    extrapolateRight: Extrapolate.CLAMP,
  });
  const opacity = interpolate(y, {
    inputRange: [-64, 0, HEADER_DELTA],
    outputRange: [0, 0.2, 1],
    extrapolate: Extrapolate.CLAMP,
  });

  return (
    <Animated.View style={[styles.container, { transform: [{ scale }] }]}>
      <Image style={styles.image} source={cover} />
      <Animated.View
        style={{
          ...StyleSheet.absoluteFillObject,
          backgroundColor: "black",
          opacity,
        }}
      />
    </Animated.View>
  );
});

const BodyText = styled.Text``;

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: MAX_HEADER_HEIGHT + BUTTON_HEIGHT * 2,
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    width: undefined,
    height: undefined,
  },
});

Тело (здесь возникает ошибка прокрутки)

import React from "react";
import styled from "styled-components";
import { StyleSheet, View } from "react-native";
import { onScroll } from "react-native-redash";
import { LinearGradient } from "expo-linear-gradient";
import Animated from "react-native-reanimated";
import ListTitle from "./ListTitle";
import ListItem from "./ListItem";
import {
  MAX_HEADER_HEIGHT,
  MIN_HEADER_HEIGHT,
  BUTTON_HEIGHT,
} from "../../helpers";

const { interpolate, Extrapolate } = Animated;

export default (ListBody = ({ album: { artist, tracks }, y }) => {
  const height = interpolate(y, {
    inputRange: [-MAX_HEADER_HEIGHT, -BUTTON_HEIGHT / 2],
    outputRange: [0, MAX_HEADER_HEIGHT + BUTTON_HEIGHT],
    extrapolate: Extrapolate.CLAMP,
  });
  const opacity = interpolate(y, {
    inputRange: [-MAX_HEADER_HEIGHT / 2, 0, MAX_HEADER_HEIGHT / 2],
    outputRange: [0, 1, 0],
    extrapolate: Extrapolate.CLAMP,
  });
  return (
    <Animated.ScrollView
      onScroll={onScroll({ y })}
      style={styles.container}
      showsVerticalScrollIndicator={false}
      scrollEventThrottle={1}
      stickyHeaderIndices={[1]}
    >
      <View style={styles.cover}>
        <Animated.View style={[styles.gradient, { height }]}>
          <LinearGradient
            style={StyleSheet.absoluteFill}
            start={[0, 0.3]}
            end={[0, 1]}
            colors={["transparent", "rgba(0, 0, 0, 0.2)", "black"]}
          />
        </Animated.View>
        <View style={styles.artistContainer}>
          <Animated.Text style={[styles.artist, { opacity }]}>
            {artist}
          </Animated.Text>
        </View>
      </View>
      <View style={styles.header}>
        <ListTitle {...{ y, artist }} />
      </View>
      <View style={styles.tracks}>
        {tracks.map((track, key) =>
          <ListItem index={key + 1} {...{ track, key, artist }} />
        )}
      </View>
    </Animated.ScrollView>
  );
});

const BodyText = styled.Text``;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: MIN_HEADER_HEIGHT - BUTTON_HEIGHT / 2,
  },
  cover: {
    height: MAX_HEADER_HEIGHT - BUTTON_HEIGHT,
  },
  gradient: {
    position: "absolute",
    left: 0,
    bottom: 0,
    right: 0,
    alignItems: "center",
  },
  artistContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
  },
  artist: {
    textAlign: "center",
    color: "white",
    fontSize: 48,
    fontWeight: "bold",
  },
  header: {
    marginTop: -BUTTON_HEIGHT,
  },
  tracks: {
    paddingTop: 32,
    backgroundColor: "black",
  },
});

Answer 1

Нашел ответ, и это было довольно очевидно, так как я читал новую документацию, я обнаружил, что onScroll был изменен на onScrollEvent и проблема решена