커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
슬라이드 이미지
[왕초보] 나만의 수익성 앱, 앱개발 종합반 v5
기타
북마크
오*성
댓글
3
추천
0
조회수
10
조회수
10
답변 완료

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>

  );

};

취소
 공유
취소
댓글 0
댓글 알림
나의얼굴