
expo 공식 문서에서 가져온 코드인데
여기선 하나의 이미지를 가져와 6개의 화면에 띄우는거같습니다.
저는 나머지 5개를 다른 사진으로 하고싶은데 대체 어느 부분을 만져야하는지 모르겠네요...
텍스트 부분은 필요없어서 지웠는데 에러만 발생합니다..
import React, {useRef} from 'react';
import {
SafeAreaView,
ScrollView,
Text,
StyleSheet,
View,
ImageBackground,
Animated,
useWindowDimensions,
} from 'react-native';
const images = new Array(6).fill(
'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
);
const App = () => {
const scrollX = useRef(new Animated.Value(0)).current;
const {width: windowWidth} = useWindowDimensions();
return (
<SafeAreaView style={styles.container}>
<View style={styles.scrollContainer}>
<ScrollView
horizontal={true}
pagingEnabled
showsHorizontalScrollIndicator={false}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: {
x: scrollX,
},
},
},
])}
scrollEventThrottle={1}>
{images.map((image, imageIndex) => {
return (
<View style={{width: windowWidth, height: 250}} key={imageIndex}>
<ImageBackground source={{uri: image}} style={styles.card}>
<View style={styles.textContainer}>
<Text style={styles.infoText}>
{'Image - ' + imageIndex}
</Text>
</View>
</ImageBackground>
</View>
);
})}
</ScrollView>
<View style={styles.indicatorContainer}>
{images.map((image, imageIndex) => {
const width = scrollX.interpolate({
inputRange: [
windowWidth * (imageIndex - 1),
windowWidth * imageIndex,
windowWidth * (imageIndex + 1),
],
outputRange: [8, 16, 8],
extrapolate: 'clamp',
});
return (
<Animated.View
key={imageIndex}
style={[styles.normalDot, {width}]}
/>
);
})}
</View>
</View>
</SafeAreaView>
);
};
