React Native-打字稿问题

Question

完成交易后，我开始收到这样的错误。我该如何解决这个问题？

我在React Native中以打字稿的形式编写了代码

node-modules文件中react-native-dash文件夹中lib文件夹中支持useScrollHandler.ts的文件似乎已删除。

import React, { useRef } from "react";
import { View, StyleSheet, Dimensions, Image } from "react-native";
import { interpolateColor, useScrollHandler } from "react-native-redash";
import Animated, { multiply, divide } from "react-native-reanimated";

import Slide, {SLIDE_HEIGHT, BORDER_RADIUS} from './Slide';
import Subslide from "./Subslide";
import Dot from "./Dot";


const { width } = Dimensions.get("window");
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white",
    }, 
    underlay: {
        ...StyleSheet.absoluteFillObject,
        alignItems: "center",
        justifyContent: "flex-end",
    },
    slider: {
        height: SLIDE_HEIGHT,
        borderBottomRightRadius: BORDER_RADIUS,
    },
    footer: {
        flex: 1,
    },
    footerContent: {
        flex: 1,
        backgroundColor: "white", 
        borderBottomLeftRadius: BORDER_RADIUS,
    },
    pagination: {
         ...StyleSheet.absoluteFillObject,
            height: BORDER_RADIUS,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
    },
});
const slides = [
    { 
        title: "Giyim", 
        subtitle: "Bayan Giyim", 
        description: "Bayan giyimde en iyi markalar", 
        color: "#BFEAF5",
        picture: {
            src: require("../images/1.jpg"),
            width: 2513,
            height: 3583,
        },
    },
    { 
        title: "Kozmetik", 
        subtitle: "Parfüm", 
        description: "Parfümde en iyi markalar", 
        color: "#BEECC4",
        picture: {
            src: require("../images/2.jpg"),
            width: 2791,
            height: 3744,
        },
    },
    { 
        title: "Aksesuar", 
        subtitle: "Takı", 
        description: "Aksesuar çeşitleri", 
        color: "#FFE4D9",
        picture: {
          src: require("../images/3.jpg"),
          width: 2738,
          heigth: 3244,  
        },
    },
    { 
        title: "Butik", 
        subtitle: "Mağazalar", 
        description: "Yüzlerce mağaza seçeneği", 
        color: "#FFDDDD",
        picture: {
            src: require("../images/4.jpg"),
            width: 1757,
            height: 2551,
        },
    },
];

const Onboarding = () => {
    const scroll = useRef <Animated.ScrollView>(null);
    const {scrollHandler, x} = useScrollHandler ();
    const backgroundColor = interpolateColor (x, {
        inputRange: slides.map((_, i) => i * width),
        outputRange: slides.map((slide) => slide.color),
    });
    return (
        <View style={styles.container}>

            <Animated.View style={[styles.slider, { backgroundColor }]}>
            {slides.map(({ picture }, index) => {
                return (                    
            <Animated.View style={styles.underlay} key={index}>
            <Image 
            source={picture.src} 
            style={{ 
                width: width - BORDER_RADIUS, 
                height: 
                ((width - BORDER_RADIUS) * picture.height) / picture.width, 
                }} 
                />
            </Animated.View>
                );
            })}

                <Animated.ScrollView 
                ref={scroll}
                horizontal 
                snapToInterval={width} 
                decelerationRate="fast" 
                showsVerticalScrollIndicator={false} 
                bounces={false}
                {...scrollHandler}
                >
                    {slides.map(({ title, picture }, index) => (
                        <Slide key={index} right={!!(index % 2)} {...{ title, picture }} /> //Üst renkli slider kısmı üzerindeki yazıların konumlandırılması
                    ))}
                </Animated.ScrollView>
            </Animated.View>
            <View style={styles.footer}>
                <Animated.View 
                style ={{ ...StyleSheet.absoluteFillObject }} // backgroundColor: "red" eklenirse Sol alt köşe rengi değişir
                 />

                 <View style= {styles.footerContent}>
             <View style={styles.pagination} >
                      {slides.map((_, index) => (
                      <Dot 
                      key={index} 
                      currentIndex={divide(x, width)} 
                      { ...{index }} 
                      />
                      ))}
                      </View>
                      <Animated.View style={{
                          flex: 1,
                          flexDirection: "row",
                          width: width * slides.length,
                          transform: [{ translateX: multiply(x, -1) }],
                      }}>

{slides.map(({ subtitle, description }, index) => (
                        <Subslide 
                        key={index} 
                        onPress={() => {
                            if(scroll.current) {
                                scroll.current
                                .getNode()
                                .scrollTo({ x: width * (index + 1), animated: true }); // İleri butonuyla bölümü atlama
                            }
                        }}
                        last={index === slides.length - 1 } 
                        {...{ subtitle, description }} 
                        />
                    ))}
                      </Animated.View>
                  </View>
               </View>
            </View>
    )
}

export default Onboarding;

Answer 1

TL; DR：

1. 在package.json中，将“ react-native-redash”：“ ^ 15.1.x”行更改为“ react-native-redash”：“ ^ 14.6.0”。
2. 删除node_modules。
3. 重新安装所有内容。

嗨，

我认为当前它们正在向react-native-redash的v2迁移，并且某些功能已不复存在。但是，您可以使用react-native-redash的早期版本来实现useScrollHandler。我已经手动修改了package.json文件，发现版本14.6.0可以正常工作。另外，如果您在https://github.com/wcandillon/react-native-redash中查找名为useScrollHandler的文件（只需按 t 键），您将一无所获。

编辑：我创建了一个问题here，希望我们有更清楚的解释。

Answer 2

在package.json中，将其编辑为“ react-native-redash”：“ 14.2.1”和yarn