1

我尝试将此示例集成到我的代码库中（没有 TSX），但是在尝试onScroll={onScroll({ y })}. 我收到以下错误(0, _reactNativeRedash.onScroll) is not a function。

我不确定问题的原因是什么，因为我已经按照示例进行操作（仅将其更改为常规 JS）

每当我注释掉onScroll={onScroll({ y })}withconsole.log("y", y);并尝试y在组件中记录值时，ListBody我都会遇到内存泄漏（使用的内存不断攀升）。

仍然不确定为什么会发生内存泄漏或我做错了什么导致错误。

问题：(0, _reactNativeRedash.onScroll) is not a function每当加载组件时，我都会收到以下错误（ Snack）

我尝试过的：删除了 scrollView 的所有内部内容，传递道具的不同方式，如y={y}or 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",
  },
});
4

1 回答 1

4

找到了答案，这很明显，当我阅读更新的文档时，我发现onScroll已更改为onScrollEvent并且问题已解决

于 2020-06-04T22:25:38.653 回答