[React Native -12] 사진 개수 제한

상품등록 Page에서 사진 등록하는 부분을 5개로 제한을 주려고 한다

 

 

상품등록 Page 부분

✔️ 갤러리로 이동하면서 배열크기 전달

🚫 이미지 배열크기가 5이면 경고창 뜨기 and 갤러리로 이동할 수 없음

// 갤러리로 이동
goGallerySreen=()=>{
    if(this.state.imageURLs.length==5)
    {
        alert('이미지는 최대 5장까지 선택할 수 있어요');
    }
    else
    {
        this.props.navigation.navigate('Stack',{screen:"Gallery", params:{imageLength:this.state.imageURLs.length}});
    }
}

 

 

갤러리 Page 부분

✔️ 상품등록에서 받은 imageLength값을 state값 변수로 넣어주기

this.state = {
    imageLength:this.props.route.params.imageLength,
};

✔️ 이미지 버튼 터치 되면 count++, 터치 안되면 count--  

🚫  이미지 배열크기가 5이상이면 경고창 뜨기

// 이미지를 누를 때
handlePress = (item) => { 
    if (this.state.itemIndex.includes(item)) {         
        const selectItem = this.state.itemIndex.filter(itemIndex => itemIndex !== item);
        this.setState({imageLength:this.state.imageLength-1}) //count--
        return this.setState({ itemIndex: selectItem })
    }

    if(this.state.imageLength>4){
        alert('이미지는 최대 5장까지 선택할 수 있어요');
        return this.setState({imageLength:this.state.imageLength})
    }

    this.setState({imageLength:this.state.imageLength+1}) //count++
    this.setState({ itemIndex: this.state.itemIndex.concat(item)});
}

 

 

 

카메라 Page 부분

✔️  상품등록에서 받은 imageLength값을 state값 변수로 넣어주기

this.state = {
    imageLength:this.props.route.params.imageLength,
}

✔️ 카메라 버튼 터치 되면 count++

🚫 이미지 배열크기가 5이상이면 경고창 뜨기

//카메라 버튼 클릭
onPressButton = async () => {
    const photo = await this.camera.current.takeSnapshot({
        flash: 'off',
    })
    if(this.state.imageLength>4){
        alert('이미지는 최대 5장까지 선택할 수 있어요');
        return this.setState({imageLength:this.state.imageLength})
    }
    this.setState({imageLength:this.state.imageLength+1}) //count++

    this.setState({ imageURLs: this.state.imageURLs.concat('file://' + photo.path) })
}

 

 

결과물