typescript - 反应本机中的Typescript forwardRef错误

Question

我有入职和幻灯片组件。我将 ref 作为道具从带有 forwardRef 的入职组件中滑动组件。它工作正常，但打字稿给我一个错误

我的组件如下所示

const Onboarding = () => {
  const { width } = useOrientation();
  const scrollX = new Animated.Value(0);
  const scroll = useRef<Animated.ScrollView>(null);
  const onScroll = (event: any) => {
    Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }]);
  };

  return (
    <Box flex={1}>
      <Animated.ScrollView
        ref={scroll}
        scrollEventThrottle={16}
        onScroll={onScroll}
        horizontal
      >
        {slides.map((data, index) => (
          <Slide key={index} data={data} ref={scroll} {...{ index, scrollX }} />
        ))}
      </Animated.ScrollView>
    </Box>
  );
};

interface SlideProps {
  data: {
    label: string;
    description: string;
    src: string;
  };
  scrollX: Animated.Value<0>;
  index: number;
}

export const Slide = forwardRef<Animated.ScrollView, SlideProps>(
  ({ data, scrollX, index }: SlideProps, ref) => {
    const { width, height } = Dimensions.get("window");

    const aspect = height / width;

    return (
      <Box flex={1} width={width} backgroundColor="mainBackground">
        <TouchableOpacity
          onPress={() =>
              //error here
            ref?.current?.getNode().scrollTo({ x: width * (index + 1), y: 0 })
          }
        >
          <Text>heyy</Text>
        </TouchableOpacity>
      </Box>
    );
  }
);

错误是这样的；类型 '((instance: ScrollView | null) => void) | 上不存在属性 'current' MutableRefObject<ScrollView | 空>'。我该如何解决这个问题？谢谢。

标签： typescriptreact-nativereact-forwardref

Answer 1

老实说，forwardRef在这种情况下看到 感觉很奇怪。我的意思是，你真正想要的是让 ref 引用Animated.ScrollView，而不是 Slide 对象。

ref选项 1（在我看来很难看）：作为属性传递Slide（而不是 ref 本身）。

选项 2（我更喜欢）：Slide告诉Onboarding媒体事件发生了，让 Onboarding 做scrollTo

const Onboarding = () => {
  const { width } = useOrientation();
  const scrollX = new Animated.Value(0);
  const scroll = useRef<Animated.ScrollView>(null);
  const onScroll = (event: any) => {
    Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }]);
  };
  const onPress = (width: number, index: number) => {
    scroll.current?.getNode().scrollTo({ x: width * (index + 1), y: 0 })
  }

  return (
    <Box flex={1}>
      <Animated.ScrollView
        ref={scroll}
        scrollEventThrottle={16}
        onScroll={onScroll}
        horizontal
      >
        {slides.map((data, index) => (
          <Slide key={index} onPress={onPress} data={data} {...{ index, scrollX }} />
        ))}
      </Animated.ScrollView>
    </Box>
  );
};

interface SlideProps {
  // same as before
  onPress: (width:number, index:number) => void
}

export const Slide = ({ data, scrollX, index, onPress }: SlideProps) => {
    const { width, height } = Dimensions.get("window");

    const aspect = height / width;

    return (
      <Box flex={1} width={width} backgroundColor="mainBackground">
        <TouchableOpacity
          onPress={() => onPress(width, index)}
        >
          <Text>heyy</Text>
        </TouchableOpacity>
      </Box>
    );
  }
);