다 잘되는데 배너 슬라이드가 안돼요

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

메인 화면 구현 - 3

작성

364

배너 슬라이드 기능만 잘 되지 않습니다.

최신 버전 강의 따라 하였습니다....

HTML/CSS javascript react node.js react-native 머신러닝 express tensorflow

답변 2

그랩

지식공유자

안녕하세요. 코드를 공유해주시면 더 빠르게 확인이 가능할 것 같아요 :)

밍또

질문자

정확히 말하면, auto 슬라이드 기능은 되는데
클릭 드래그를 통한 슬라이드가 구현되지 않습니다.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, SafeAreaView } from "react-native";
import React from "react";
import axios from "axios";
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import "dayjs/locale/ko"
import Carousel from "react-native-reanimated-carousel"

import { API_URL } from "../config/constants";
import AvatarImage from "../assets/icons/avatar.png";

dayjs.extend(relativeTime);
dayjs.locale("ko");

export default function MainScreen() {

    const [products, setProducts] = React.useState([]);
    const [banners, setBanners] = React.useState([]);

    React.useEffect(() => {
        axios
            .get(`${API_URL}/products`)
            .then((result) => {
                console.log(result);
                setProducts(result.data.products)
            })
            .catch((error) => {
                console.error(error);
            });

        axios
        .get(`${API_URL}/banners`)
        .then((result) => {
          setBanners(result.data.banners);
        })
        .catch((error) => {
          console.error(error);
        })

    }, []);

    return (
        <View style={styles.container}>
            <ScrollView>
                <Carousel
                    data={banners}
                    width={Dimensions.get("window").width}
                    height={200}
                    autoPlay={true}
                    sliderWidth={Dimensions.get("window").width}
                    itemWidth={Dimensions.get("window").width}
                    itemHeight={200}
                    renderItem={(obj) => {
                        return (
                            <TouchableOpacity
                                onPress={() => {
                                    Alert.alert("배너 클릭");
                                }}
                            >
                                <Image
                                    style={styles.bannerImage}
                                    source={{
                                        uri: `${API_URL}/${obj.item.imageUrl}`,
                                    }}
                                    resizeMode="contain"
                                />
                            </TouchableOpacity>
                        );
                    }}
                />
                <Text style={styles.Headline}>판매되는 상품들</Text>
                <View sytle={styles.productList}>
                    {products.map((product, index) => {
                        return (
                            <View style={styles.productCard}>
                                {product.soldout === 1 && (
                                    <View style={styles.productBlur} />
                                )}
                                <View>
                                    <Image
                                        style={styles.productImage}
                                        source={{
                                            uri: `${API_URL}/${product.imageUrl}`,
                                        }}
                                        resizeMode={"contain"}
                                    />
                                </View>
                                <View style={styles.productContents}>
                                    <Text sytle={styles.productName}>
                                        {product.name}
                                    </Text>
                                    <Text sytle={styles.productPrice}>
                                        {product.price}원
                                    </Text>
                                    <View style={styles.productFooter}>
                                        <View style={styles.productSeller}>
                                            <Image
                                                style={styles.productAvatar}
                                                source={AvatarImage}
                                            />
                                            <Text
                                                style={styles.productSellerName}
                                            >
                                                {product.seller}
                                            </Text>
                                        </View>
                                        <Text style={styles.productDate}>
                                            {dayjs(product.createdAt).fromNow()}
                                        </Text>
                                    </View>
                                </View>
                            </View>
                        );
                    })}
                </View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        padding: 32,
    },

    productCard: {
        width: 320,
        borderColor: "rgb(230,230,230)",
        borderWidth: 1,
        borderRadius: 16,
        backgroundColor: "white",
        marginBottom: 8,
    },

    productImage: {
        width: "100%",
        height: 210,
    },
    productContents: {
        padding: 8,
    },

    productSeller: {
        flexDirection: "row",
        alignItems: "center",
    },

    productAvatar: {
        width: 24,
        height: 24,
    },

    productFooter: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        marginTop: 12,
    },

    productName: {
        fontSize: 16,
    },

    productPrice: {
        fontSize: 18,
        fontWeight: "600",
        marginTop: 8,
    },

    productSellerName: {
        fontSize: 16,
    },

    productDate: {
        fontSize: 16,
    },

    productList: {
        alignItems: "center",
    },

    Headline: {
        fontSize: 24,
        fontWeight: "800",
        marginBottom: 24,
    },

    productBlur: {
        position: "absolute",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor : "#ffffffa6",
        zIndex: 999
    },

    bannerImage: {
      width: "100%",
      height: 200,
    },

    safeAreaView: {
      flex: 1,
      backgroundColor: "#fff"

    }
});

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

배너 슬라이드 기능이 작동하지 않는다고 하셨군요. 이런 경우에는 몇 가지 가능한 원인과 해결 방법을 살펴볼 수 있습니다.

스크립트 또는 라이브러리 문제: 배너 슬라이드를 구현하는 데 사용한 스크립트 또는 라이브러리가 정상적으로 동작하고 있는지 확인해야 합니다. 해당 강의에서 사용한 최신 버전 강의 따라 했다고 하셨는데, 혹시 스크립트나 라이브러리의 버전이나 URL이 정확한지 다시 한번 확인해 보시는 것이 좋습니다.
HTML 및 CSS 오류: 배너 슬라이드를 구현하는 HTML과 CSS 코드에 오타나 오류가 있는지 확인해야 합니다. 코드를 잘못 작성하거나 속성을 잘못 설정한 경우에는 원하는 동작을 기대하기 어렵습니다. 코드를 다시 한 번 살펴보시고, 문제가 없는지 확인해 주세요.
이미지 경로 문제: 배너 슬라이드에 사용할 이미지 파일들의 경로가 제대로 설정되어 있는지 확인해야 합니다. 이미지 파일이 존재하지 않거나 경로가 잘못된 경우에는 이미지가 표시되지 않을 수 있습니다. 따라서 이미지 파일의 경로를 다시 확인해 주세요.

위의 점을 먼저 확인해 보시고, 문제가 해결되지 않는다면 정확한 원인 파악을 위해 스크린샷이나 더 자세한 오류 메시지를 제공해 주시면 도움이 될 것 같습니다.

그럼 해결되시길 바랍니다. 좋은 하루 되세요!

인프런 커뮤니티 질문&답변

다 잘되는데 배너 슬라이드가 안돼요