다 잘되는데 배너 슬라이드가 안돼요
422
작성한 질문수 5
배너 슬라이드 기능만 잘 되지 않습니다.
최신 버전 강의 따라 하였습니다....
답변 2
0
안녕하세요. 코드를 공유해주시면 더 빠르게 확인이 가능할 것 같아요 :)
0
정확히 말하면, 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"
}
});
0
안녕하세요, 인프런 AI 인턴입니다.
배너 슬라이드 기능이 작동하지 않는다고 하셨군요. 이런 경우에는 몇 가지 가능한 원인과 해결 방법을 살펴볼 수 있습니다.
스크립트 또는 라이브러리 문제: 배너 슬라이드를 구현하는 데 사용한 스크립트 또는 라이브러리가 정상적으로 동작하고 있는지 확인해야 합니다. 해당 강의에서 사용한 최신 버전 강의 따라 했다고 하셨는데, 혹시 스크립트나 라이브러리의 버전이나 URL이 정확한지 다시 한번 확인해 보시는 것이 좋습니다.
HTML 및 CSS 오류: 배너 슬라이드를 구현하는 HTML과 CSS 코드에 오타나 오류가 있는지 확인해야 합니다. 코드를 잘못 작성하거나 속성을 잘못 설정한 경우에는 원하는 동작을 기대하기 어렵습니다. 코드를 다시 한 번 살펴보시고, 문제가 없는지 확인해 주세요.
이미지 경로 문제: 배너 슬라이드에 사용할 이미지 파일들의 경로가 제대로 설정되어 있는지 확인해야 합니다. 이미지 파일이 존재하지 않거나 경로가 잘못된 경우에는 이미지가 표시되지 않을 수 있습니다. 따라서 이미지 파일의 경로를 다시 확인해 주세요.
위의 점을 먼저 확인해 보시고, 문제가 해결되지 않는다면 정확한 원인 파악을 위해 스크린샷이나 더 자세한 오류 메시지를 제공해 주시면 도움이 될 것 같습니다.
그럼 해결되시길 바랍니다. 좋은 하루 되세요!
[해결]그랩님 답변 주세요.
0
164
2
그랩님의 답변을 기다립니다/102강 전반적인 에러
0
143
2
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
0
126
2
[재질문][그랩님 답변 부탁드립니다]101강
0
143
2
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
0
98
2
Ngrok 설치 후 forwarding Url 에러
0
133
2
[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.
0
220
2
Ngrok 설치 후 forwarding Url로 연결 불가
0
137
1
그랩님,[꼭] 답변 부탁드립니다.
0
68
1
[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.
0
153
1
6강/7강 수업
0
52
1
그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.
0
99
2
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
0
136
2
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
89
1
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
0
130
2
일반적인 css 꾸미기에서 width와 height의 값?
0
93
2
Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법
0
196
1
그랩마켓 웹화면 구현하기 -2 질문입니다.
0
121
1
react에 반영이 되지 않습니다.
0
241
1
터미널 npm install -g create-react-app 작성 후 오류
0
421
1
create-react-app my app 실행 시 에러
0
356
2
포스트맨 질문
0
100
1
<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.
0
261
2
그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.
0
479
2