Блог

После транзакции, которую я выполнил, я начал получать ошибку, подобную этой. Как я могу решить проблему?

Я написал код на React Native как typescript

Похоже, что файл, поддерживающий useScrollHandler.ts в папке lib в папке react-native-dash в файле node-modules, был удален.

 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;
  

TL; DR:

1. Измените в вашем package.json строку «react-native-redash»: «^ 15.1.x» на «react-native-redash»: «^ 14.6.0».
2. Удалите node_modules.
3. Переустановите все.

Привет,

Я думаю, что в настоящее время они переходят на версию v2 react-native-redash, и некоторые функции находятся не там, где они были раньше. Однако для реализации useScrollHandler можно использовать более раннюю версию react-native-redash. Я вручную изменил свой файл package.json и обнаружил, что версия 14.6.0 работает так, как ожидалось. Кроме того, если вы ищете файл с именем useScrollHandler (просто нажав клавишу t) в https://github.com/wcandillon/react-native-redash вы ничего не находите.

Редактировать: я создал здесь проблему, и, надеюсь, у нас будет более четкое объяснение.

В package.json файле вы редактируете его "react-native-redash": "14.2.1" и yarn